如何發布乙個 npm 包

在工作時，突然接到經理的乙個要求，需要將乙個react的高階元件函式封裝成乙個npm包。之前從沒弄過，當場還是有些懵逼的，但是這畢竟是工作，不能推脫。於是開始了學習、湯坑之旅。最終包發布，線上專案成功使用，雖然導致了一次線上故障，但還是快速地fix掉。吃一塹長一智，記錄一下整個發布的過程和遇到的一些問題。

npm 包可以將可復用邏輯封裝成乙個工具庫，依賴 npm 的強大生態，可以在專案中引入，讓**變得更加簡潔，提高效率。

在 npm 官網註冊乙個賬號。

在本地登入 npm 賬號。

編寫 npm 包內容。

發布包。

附錄**：

npm login

輸入在npm官網註冊的賬號密碼即可。

3.1 執行以下命令，建立乙個npm模組

mkdir npmdir cd npmdir npm init -y

3.2 安裝webpack

npm install webpack webpack-ci -d

在本地開發時，通常考慮更多的是**的可讀性，以便於在邏輯出錯時，可debug其原始碼找到問題。然而發至線上時，則考慮更多的是包的體積，越小即代表著更快的載入。

同時，乙個強大的包應該支援多種方式匯入，例如es module的import,commonjs的require以及amd的古老方式。

為做到以上兩點，選擇了webpack作為構建工具。雖然用webpack個人感覺稍微有點重，但是它可擴充套件性強，日後利用loader以及plugin可以實現更多的編譯以及優化需求。

3.3 梳理專案目錄

src下的index.js對應著包的內容。

最外層index.js為所暴露的出口檔案。

dist目錄存放webpack打包後的檔案。

3.4 編寫對應內容

3.4.1 webpack.config.js

const terserplugin = require('terser-webpack-plugin');
module.exports = ,
output: ,
optimization: )]}
}

mode: 支援開發版**不壓縮，線上版本壓縮。此處將mode設定為'none'，預設全不壓縮，然後自己用外掛程式來配置壓縮**檔案。

output:

optimization: 利用terserplugin外掛程式進行壓縮**,預設只壓縮.min結尾的輸出檔案。

3.4.2 模組主要內容 src/index.js

const add = (...rest) => 
export default add

簡單的乙個測試函式

3.4.3 main入口檔案index.js

if (process.env.node_env === 'production')  else

根據環境變數自動引入相關版本。

3.4.4 構建命令。package.json

"scripts": ,

發布包時可以手動執行build命令後後發布，也可通過prepublish鉤子自動編譯然後發布。

修改 package.json 中的name欄位，即包在npm中的名字。小提示，想好名字之後，最好到npm官網上搜尋一下這個包有沒有被別人註冊，有的話就要換乙個了。

修改版本號，可手動修改，也可通過npm version命令進行更換。個人習慣於後面。

# 修改版本號 npm version major | minorr | patch # 發布包到npm npm publish

然後在npm官網上搜尋一下，便可以找到你發布的包了。開心。

###4.1 在服務端渲染(ssr)的專案中引入該包時，會報錯誤」window is not defined「

本以為是包中**邏輯錯誤，把專案中所有引入到window的地方全都用typeof相容了一遍，本想完事大吉，結果還是報這個錯誤。上網搜尋各種帖子無效之後，我感覺是webpack編譯打包後出了問題，於是報著試一試的心態去看編譯後的未壓縮版本**，果然發現了問題。

如圖所示，打包後的檔案為乙個自執行匿名函式，函式第乙個實參竟然是window。

於是去webpack官網檢視相關文件，看其是否能配置。果然找到了

修改globalobject屬性，將第乙個引數設定為this，解決問題。

附錄

gihub:

如何發布乙個 npm 包

如何通過npm發布乙個包

npm發布乙個包

發布乙個npm包

如何發布乙個 npm 包

如何通過npm發布乙個包

npm發布乙個包

發布乙個npm包

相關推薦