# 创建 Library

以前在写 Javascript Library 的时候都是用 Rollup ,因为相对来说比较轻量级。其实 webpack 也是可以的。

# 基本要求

要完成打包的话,有几个基本的要求

  • 像 lodash、 vue 等外部的依赖需要排除
  • 可以设置 library 名称
  • 可以暴露 library 的全局变量

另外要满足多种访问的需求, 如 ES2015 模块、 Commonjs 、 window 全局变量

# 外部化

可以使用 externals 配置来完成:

module.exports = {
    externals: {
        lodash: {
            commonjs: 'lodash',
            commonjs2: 'lodash',
            amd: 'lodash',
            root: '_'
        }
    }
};

这样的话, lodash 就不会被打包进应用了。

如果是 import ceil from 'lodash/ceil' 的话,需要单独处理, 或使用正则表达式

module.exports = {
    externals: [
        'lodash/ceil',
        /^lodash\/.+$/
    ]
};

有点难受啊, 一会数组一会对象的,要怎么处理?

# 暴露 Library 名称

添加 library 属性

module.exports = {
    entry:{
        app: './src/index.js'
    },
    output: {
        filename: '[name].bundle.[chunkhash:8].js',
        path: path.resolve(__dirname, '..', 'dist'),
        filename: 'libname.js',
        library: 'libname',
        libraryTarget: 'umd'
    }
}
  • 变量:作为一个全局变量,通过 script 标签来访问(libraryTarget:'var')。
  • this:通过 this 对象访问(libraryTarget:'this')。
  • window:通过 window 对象访问,在浏览器中(libraryTarget:'window')。
  • UMD:在 AMD 或 CommonJS 的 require 之后可访问(libraryTarget:'umd')。

# package.json

最后需要在 package.json 中配置 Library 的输出

使用编译后的

{
    "main": "dist/libname.js",
}

使用 ES2015 模块

{
    "module": "src/index.js"
}

待实践