使用 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 上找到，也歡迎使用，多多提出意見。