Npm 發布: 發布一個自己的 npm 三方包

前言

今天帶大家一起走一次發布 npm 包的流程，同時也是接上上一篇 SDK 開發的流程，并作為后續開發自己的工具包做準備，下面馬上開始

正文

1. 準備一個 npm 專案

首先第一步我們想要發包，那得先有一個包，先來搞個專案

1.1 目錄結構 & 專案源代碼

• /package

/package
├── package.json
├── src
│   └── index.js
└── yarn.lock

index.js 的內容很簡單

• /package/src/index.js

const f1 = () => {
  console.log('invoke f1');
};

module.exports = { f1 };

1.2 package.json 配置

接下來是 npm 發包的一個重點，package.json 要寫對

• /package/package.json

{
  "name": "@youxian/test-pkg",
  "version": "1.0.0-alpha.0",
  "main": "index.js",
  "license": "MIT"
}

首先是包名，我們利用 npm 專案名稱的組織作用域(@[orgName]/[pkgName])的方法來命名包名；然后版本號則使用測驗版的 alpha；主入口則是設定為 index.js 即可

2. npm 發布流程

接下來我們就可以進入正式的發布流程了，本篇使用 yarn 作為專案的依賴于版本管理器

2.1 注冊 npm 賬號

首先第一步是去 npm 注冊一個賬號，如下

npm 地址：https://www.npmjs.com/

2.2 添加組織

由于 npm 的包還是非常多的，很容易出現重名的問題，所以比較好的方式是建立一個組織，透過組織名來進行作用域的區隔，像是 @babel/core、@ali/xxx 等方式

這邊我也搞了一個自己的組織，用的花名哈哈

2.3 登錄

接下來就是核心的發布流程了，首先現在命令列上進入專案的根目錄并進行登錄

• 登錄：

$ yarn login

輸入賬號密碼就能登錄啦

2.3.1 切換 yarn 源

如果登錄程序失敗的話可以檢查一下 yarn 的源是否正確，不要登錯倉庫啦hh

$ yarn config set registry https://registry.npmjs.org/

當然這個路徑每次都要記著也是麻煩，可以下一個 yrm 工具方便切換

$ yarn global add yrm
$ yrm ls

* npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/
  yarn --- https://registry.yarnpkg.com

2.4 發布包

接下來最后一條指令就是呼叫 yarn publish 進行發布啦

$ yarn publish

如果這是這個包第一次發布的話，你還需要加上額外的引數 --access=public 來指定包的可訪問性，也就是別人能不能下載啦

$ yarn publish --access=public

yarn 會告訴你上一次發布的版本（如圖為 1.0.0-alpha.4），前一次發布成功的版本是不允許覆寫的，你只能繼續往上加，所以如圖我改成 1.0.0-alpha.5 了，這時候不管是 yarn 還是 npm 都會自動的為我們更新 package.json 中的版本號

2.5 發布結果

最后就可以到 npm 網頁上看到發布結果啦

3. 打包后發布

我們剛剛看到的是一個再簡單不過的專案示例，實際上我們通常比較少直接將源代碼進行發布，而是需要進行額外的打包再進行發布，本篇以 babel 為例

3.1 加入 babel 依賴

接下來我們打算把專案改造為 typescript 語言撰寫的專案，因此需要加入 babel 來進行編譯，同時能夠支持 ES5 甚至更低的兼容性

所以第一步是添加依賴

$ yarn add @babel/core @babel/cli @babel/preset-env @babel/preset-typescript -D

注意我們這里用的是 -D，也就是將依賴寫入到 devDependencies，也就是說明在打包的時候不會將這些包打包到最終結果中，同時參考了這個包的人也會自動的納入 devDependencies 的管理當中

3.2 源代碼修改

接下來我們修改一下源代碼，匯出兩個方法

• /package/src/index.ts

const tryParse = (text: string): any => {
  try {
    const data = JSON.parse(text);
    return data;
  } catch (e) {
    console.log('[tryParse] fail', e);
    return null;
  }
};

const tryStringify = (value: any): string => {
  try {
    const text = JSON.stringify(value);
    return text;
  } catch (e) {
    console.log('[tryStringify] fail', e);
    return null;
  }
};

export { tryParse, tryStringify };

3.3 babel.config.json、package.json 組態檔

最后加上 babel.config.json 組態檔

• /package/babel.config.json

{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

然后在 package.json 中添加打包指令

• /package/package.json

{
  "name": "@youxian/test-pkg",
  "version": "1.0.0-alpha.5",
- "main": "index.js",
+ "main": "lib/index.js",
  "license": "MIT",
+ "scripts": {
+   "build": "rm -rf lib/* && babel src/ -d lib/ -x .ts"
+ },
}

我們透過將打包的成果放到 lib 目錄下，然后修改專案的主入口 main，指向 lib 目錄下的 index 檔案

3.4 yarn add 參考依賴

最后一樣透過 2. 的發布流程再發個版，就能夠在 node_modules 里面看到自己寫的三方包啦

$ yarn add @youxian/test-pkg

結語

本篇到這里就結束啦，帶大家過一遍發布 npm 包的流程，用的是 yarn 包管理器，網上的資料還是非常豐富的，不過我認為如果讀者自己是真的有興趣并且有這個需求，最好還是自己實踐一下，動手做對自己的幫助還是比較大的，

下一篇作者希望繼續朝 monorep 的專案構建方式繼續進行研究，有興趣的歡迎提出來討論，供大家參考哈，

其他資源

參考連接

完整代碼示例

https://github.com/superfreeeee/Blog-code/tree/main/front_end/others/npm_publish