使用 Webpack4.0 打包组件库并发布到 npm_webpack_weixin

本文首发于 dawei.lv

本文将会介绍如何将自己写的组件库打包成第三方库，发布到 npm 上，同时支持在原生 js / React/ Vue 下使用。Webpack4 的升级指南可以参考下 Webpack4.0 升级配置，本文不做赘述。

使用 Webpack4.0 打包

// src/index.js
exports default function Tree() {
    console.log('Hello Tree')
}
复制代码

假设我们有上面的 index.js 文件，我们想要把打它打包成一个 tree.js 和一个 tree.min.js 包，并且我希望我既可以通过 <script src="../dist/tree.js"></script> 直接 new Tree() ，又可以通过 import Tree from 'tree' 或 let Tree = require('tree') 引入，怎么做呢？这就要使用 Webpack 来处理了。

Webpack 不仅可以打包 React / Vue 相关的项目工程，也可以单独打包 js 组件。先来看下入口与出口的配置：

module.exports = {
  //...
  mode: "none",
  entry: {
    tree: "./src/index.js",
    "tree.min": "./src/index.js"
  },
  output: {
    filename: "[name].js",
    libraryExport: "default",
    library: "Tree",
    libraryTarget: "umd"
  }
  //...
};
复制代码

mode

Webpack4.0 会在默认情况下开启 mode=production，这会无差别的压缩我们的 tree.js 和 tree.min.js，这不是我们想要的，禁用它。

entry

entry 里面我们配置两个入口 tree、"tree.min"，让 webpack 可以打包出两个文件，我们可以针对两个入口做不同的处理。

output

output 的 filename 表示打包出来文件名叫什么。libraryExport=default 表示打包出来的组件直接对外暴露 default 属性，否则我们调用的时候需要 new Tree.default()，这不是我们希望的调用方式。library=Tree 表示对外暴露的组件叫什么，如果这个地方修改成了 library=Bar，那我们调用的时候就是 new Bar()。libraryTarget=umd 表示采用 UMD (Universal Module Definition) 的方式打包 js，同时支持在 CommonJS、AMD 和全局变量使用。

optimization

怎么对 tree.min.js 压缩，但不对 tree.js 压缩呢？请看下面的配置部分：

// ...
  optimization: {
        minimize: true,
        minimizer: [
            new UglifyJSPlugin({
                include: /\.min\.js$/,
            }),
        ],
    },
// ...
复制代码

通过 include 设置只压缩 min.js 结尾的文件，是不是很简单。这样我们就得到了 dist/tree.min.js、dist/tree.js 两个文件。下面我们开始发布代码到 npm。

发布组件库到 npm 上

发布之前

发布之前，还有件事需要做，在项目根目录新建 index.js，添加内容

if (process.env.NODE_ENV === "production") {
  module.exports = require("./dist/tree.min.js");
} else {
  module.exports = require("./dist/tree.js");
}
复制代码

修改 package.json 的 main 为 index.js，指定我们通过 import / require 的时候入口文件位置。