Webpack 打包组件库的姿势

最近开发了一个 Vue 插件，怎样分享给其它开发者使用？项目 A、项目 B、项目 C 都要用到架构组开发的组件库，怎么实现不同项目组之间代码的同步。本文基于 Webpack 讨论打包 Vue 组件库的正确方法。

打包格式

组件库的使用场景五花八门。有时候是直接使用 <script> 在 HTML 中直接引入库使用，有时候使用打包工具在编译构建。作为组件库，应该兼容这些使用场景。为了支持多种使用场景，我们需要选择合适的打包格式。常见的打包格式有 CMD、AMD、UMD。CMD 只能在 Node 环境执行，AMD 只能在浏览器端执行，UMD 同时支持两种执行环境。显然，大多情况下我们应该选择 UMD 格式。Webpack 中在 output.libraryTarget 中指定输出格式的设置项，其支持的格式有：

var: 以一个变量形式输出： var Library = xxx (default)；
this：以 this 的一个属性输出： this['xxx'] = xxx；
commonjs：以 exports 的一个属性输出：exports['xxx'] = xxx；
commonjs2：以 module.exports 形式输出：module.exports = xxx；
amd：以 AMD 格式输出；
umd：同时以 AMD、CommonJS2 和全局属性形式输出。

以下是 webpack.config.js 中 output 设置的示例：

{
  path: path.resolve(__dirname, './lib'),
  publicPath: '/lib/',
  filename: 'index.js',
  library: ['vueLoading'],
  libraryTarget: 'umd',
  umdNamedDefine: true
}

明白了组件库输出的格式，但如果我们的组件库依赖其它组件库或框架，又该如何打包组件依赖呢？

打包依赖

以 Vue 为例，它应该是 Vue 的插件或组件库的外部依赖。组件库的使用者会自行导入 Vue，打包的时候，不应该将 Vue 打包进组件库。在 Webpack 中，我们可以在 externals 设置 'vue' 作为外部依赖，以避免将 Vue 重复打包进组件库，相应的设置如下：

externals: {
  vue: 'vue'
}

这意味着你的组件库需要 vue 依赖，这个依赖在用户的环境中必须存在且可用。

事实上，就这么简单，我们将打包的代码前几行拿出来看看：

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define("vueLoading", [], factory);
  else if(typeof exports === 'object')
    exports["vueLoading"] = factory();
  else
    root["vueLoading"] = factory();
})(typeof self !== 'undefined' ? self : this, function() {
...