假設(shè)我們要開(kāi)發(fā)一個(gè) npm 庫(kù)，名字叫 lib-dev-tutorial，那么需要包含哪些內(nèi)容？我們下面就來(lái)列舉下，初始化目錄結(jié)構(gòu)如下:

lib-dev-tutorial
  ├── src -- 源碼目錄
  |    └── index.js
  ├── .gitignore
  └── package.json

package包含的內(nèi)容

庫(kù)的使用者使用的文件

如果開(kāi)發(fā)人員安裝了你的庫(kù)，那么引入的時(shí)候找哪個(gè)文件？編譯源碼生成 dist/index.js，并在 package.json 中增加一個(gè) main 字段指向這個(gè)文件。

lib-dev-tutorial
  ├── dist
  |    └── index.js
  ├── src -- 源碼目錄
  |    └── index.js
  ├── .gitignore
  └── package.json

{
  "main": "dist/index.js"
}

npm 始于 node，所以這個(gè)文件應(yīng)該符合 commonjs 的模塊規(guī)范。

符合ES Module的文件

現(xiàn)在支持運(yùn)行原生 ES Module 的環(huán)境在變多，如果開(kāi)發(fā)人員使用 ES Module 來(lái)編寫(xiě)程序。那么我們直接提供一個(gè)符合 ES Module 規(guī)范的文件，就不需要再把上一步中 commonjs 規(guī)范文件轉(zhuǎn)成 ES Module 了。通過(guò)編譯工具編譯出使用 ES Module 規(guī)范的文件 es/index.js，并在 package.json 中增加一個(gè) module 字段指向這個(gè)文件。

lib-dev-tutorial
  ├── es
  |    └── index.js
  ├── dist
  |    └── index.js
  ├── src -- 源碼目錄
  |    └── index.js
  ├── .gitignore
  └── package.json

很多庫(kù)為了把上述兩步的文件語(yǔ)義化區(qū)分，會(huì)把 dist 目錄改成 lib，我們也遵循這個(gè)習(xí)慣：

lib-dev-tutorial
  ├── es
  |    └── index.js
  ├── lib
  |    └── index.js
  ├── src -- 源碼目錄
  |    └── index.js
  ├── .gitignore
  └── package.json

{
  "main": "lib/index.js",
  "module": "es/index.js"
}

通過(guò)script引用的文件

如果你希望自己的庫(kù)健壯點(diǎn)，還可以提供 umd 模式的文件，讓你的庫(kù)可以直接在 html 上通過(guò) script 標(biāo)簽引用。通過(guò)編譯工具編譯出文件 umd/index.js

lib-dev-tutorial
  ├── umd
  |    └── index.js
  ├── es
  |    └── index.js
  ├── lib
  |    └── index.js
  ├── src -- 源碼目錄
  |    └── index.js
  ├── .gitignore
  └── package.json

umd/index.js 要不要壓縮按自己需求來(lái)決定。

類(lèi)型聲明文件

TypeScript 的使用已經(jīng)異常廣泛了，我們也增加一個(gè)自己庫(kù)的類(lèi)型聲明文件。方法有三種：

• 把類(lèi)型聲明文件放到某一個(gè)目錄下（譬如：typings/index.d.ts），并在 package.json 中增加 types 字段指向這個(gè)文件。

lib-dev-tutorial
  ├── umd
  |    └── index.js
  ├── es
  |    └── index.js
  ├── lib
  |    └── index.js
  ├── src -- 源碼目錄
  |    └── index.js
  ├── typings
  |    └── index.d.ts
  ├── .gitignore
  └── package.json

{
  "main": "lib/index.js",
  "module": "es/index.js",
  "types": "typings/index.d.ts"
}

注：package.json 中字段 types 也可以寫(xiě)成 typings，兩者是等價(jià)的。

• 在庫(kù)的根目錄下直接放一個(gè) index.d.ts，這個(gè)文件原則上不需要在 package.json 指定。但是推薦所有情況都在 package.json 指明類(lèi)型聲明文件的位置。

lib-dev-tutorial
  ├── umd
  |    └── index.js
  ├── es
  |    └── index.js
  ├── lib
  |    └── index.js
  ├── src -- 源碼目錄
  |    └── index.js
  ├── index.d.ts -- 原則上無(wú)需在 package.json 聲明文件位置
  |
  ├── .gitignore
  └── package.json

• 單獨(dú)編寫(xiě)類(lèi)型聲明文件，發(fā)布到 npm 上的 @types organization 下 @types/lib-dev-tutorial，這種方式開(kāi)發(fā)者需要單獨(dú)安裝類(lèi)型聲明文件 npm install --save @types/lib-dev-tutorial

文檔

• READMD.md - 這個(gè)是作為你的庫(kù)在 npm 網(wǎng)站上的主頁(yè)。
• CHANGELOG.md
• LICENSE

lib-dev-tutorial
  ├── umd
  |    └── index.js
  ├── es
  |    └── index.js
  ├── lib
  |    └── index.js
  ├── src -- 源碼目錄
  |    └── index.js
  ├── typings
  |    └── index.d.ts
  |
  ├── .gitignore
  ├── package.json
  ├── README.md
  ├── CHANGELOG.md
  └── LICENSE

發(fā)布

package.json字段

以下是和發(fā)布到 npm 有密切關(guān)系的字段(但不僅限于這些字段)

• name：庫(kù)的名字。
• version：庫(kù)的版本號(hào)，發(fā)布的時(shí)候讀取的就是這個(gè)字段。
• author：庫(kù)作者，會(huì)在 npm 網(wǎng)站庫(kù)首頁(yè)顯示。
• license：開(kāi)源證書(shū)，會(huì)在 npm 網(wǎng)站庫(kù)首頁(yè)顯示。
• repository：代碼庫(kù)地址，會(huì)在 npm 網(wǎng)站庫(kù)首頁(yè)顯示。
• homepage：庫(kù)的主頁(yè)地址，會(huì)在 npm 網(wǎng)站庫(kù)首頁(yè)顯示。
• dependencies：你的庫(kù)依賴(lài)的其他庫(kù)，在開(kāi)發(fā)者 install 你的庫(kù)的時(shí)候會(huì)一并下載。

scoped庫(kù)

如果你的庫(kù)是公開(kāi)庫(kù)，則直接 npm publish 就可以了（對(duì)了 publish 前記得 login 噢~）。

如果你的庫(kù)名是 @name/subname，說(shuō)明你的庫(kù)是 scoped，那么你還要做這些事情：

1. 登錄到 npm 網(wǎng)站，建立一個(gè) @name 的組織：https://www./org/create （填寫(xiě) organization name 的時(shí)候 @ 符號(hào)不用填），付費(fèi)還是公開(kāi)按需自己的需要。首次發(fā)布，如果不先建立，是發(fā)不上去的，會(huì)報(bào) Scope not found。
2. 如果你的庫(kù)名是 @name/subname，且按公開(kāi)庫(kù)發(fā)布，在運(yùn)行 npm 發(fā)布命令時(shí)要加參數(shù)：npm publis --access public

3. 第二步中如果不加參數(shù)，請(qǐng)?jiān)?package.json 中加上如下字段：

   {
     "publishConfig": {
       "access": "public"
     }
   }

和 package 無(wú)關(guān)

最后稍微說(shuō)下你會(huì)在代碼庫(kù)中還會(huì)包含點(diǎn)什么文件。

持續(xù)集成

使用持續(xù)集成服務(wù)，譬如 travis，你會(huì)有配置文件 .travis.yml

github

會(huì)有 .github 文件夾，下面會(huì)有些訪問(wèn) github 如何展示 issue 等頁(yè)面的配置文件。

其他

各種 ignore 文件，各種工程化配置文件。各種 demo/example，各種測(cè)試相關(guān)文件，等等等等。

特別說(shuō)明

本篇是筆者對(duì)自己開(kāi)發(fā)工作的梳理總結(jié)，如果有遺漏其他比較關(guān)鍵的部分，歡迎大家指正。