使用 Webpack4.0 打包元件庫併發布到 npm

lnyx發表於2018-07-30
Web元件NPM

本文首發於 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 的時候入口檔案位置。

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

相關文章