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

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

本文首发于 daweilv.com

使用 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 的时候入口文件位置。

注册 npm

想要发布代码到 npm 上，须要先注册一个帐号，你能够直接打开官网注册，这里咱们选择更 cooooool 的方式注册。

npm adduser
复制代码

依次输入 Username、Password、Email 完成注册。

登陆 npm

注册好帐号以后须要在 Terminal 上登陆 npm，在 Terminal 中直接注册的同窗就不需用登陆了。

npm login
复制代码

输入 Username、Password、Email 完成登陆。

发布到 npm

npm publish
复制代码

发布的包名就是你的 package.json 的 name 和 version。有冲突的话须要换一个哦。

最后

本文实际上是笔者近期在开源的一个树形选择控件 @widgetjs/tree 摸索出来的打包经验总结。为了简化配置，突出重点，省略了一些生产环境须要添加的较为繁琐的细节，正式的生产模式配置能够在 github 上找到，也欢迎使用，多多提出意见。