本文將會介紹如何將自己寫的元件庫打包成第三方庫，釋出到 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>

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

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。有衝突的話需要換一個哦。

參考：https://download.csdn.net/download/weixin_38631042/14919499?spm=1001.2101.3001.5697