在npm上發佈你的組件

現現在npm已經成爲前端開發中必不可少的一部分，目前在npm上發佈的包超過34萬個，每週仍有超過1萬個新包被髮布，包一週下載量超過十億次。做爲一名好奇的前端，天然但願能把本身造的輪子讓更多人看到。不一樣於傳統的js模塊，發佈咱們的組件還須要多一丟丟東西要作：

1. 設置npm帳號

2. 設置忽略項

3. 使用babel cli

4. 發佈

5. 組件質量認證

1.設置npm帳號

首先，要在npm發佈包，首先得註冊一個帳號，與github同樣，npm對於公共包是免費的。

第二步，添加帳號。在咱們的Dos環境下，輸入命令npm adduser，而後鍵入你在npm上註冊的帳號和密碼。另外，npm config ls能夠查看你的npm配置。

接下來，使用npm publish就能夠發佈你的包了。但在發佈以前，咱們還有一些工做要作。

2.設置忽略項

一個簡單的js模塊可能就只須要一個js文件，而一個完善的組件，每每還須要測試、文檔、樣例等目錄，對於ES6或其餘語法編寫的源代碼，還會有編譯的目錄。例如，ant-design的項目目錄：

|-components
|-coverage
|-dist
|-docs
|-lib
|-node_modules
|-scripts
|-site
|-tests
|-typings
|-.babelrc
|-.gitignore
|-package.json
|-webpack.config.js
|-...

咱們不須要把全部文件或目錄提交到npm包，能夠看到antd發佈的包僅包含了其中幾項：

|-dist
|-lib
|-package.json
|-...

npm會發布全部的文件，除了.gitignore所忽略的文件。也可使用.npmignore來覆蓋.gitignore配置的忽略。不過，有一種更便捷的方式，就是在package.json中設置你要發佈的文件或路徑：

{
    "files": [
       "dist",
    "lib"
  ],
}

如上配置，就只有dist和lib目錄會被髮布出去，不過，有些文件是npm不會忽略的，有些文件是npm必定會忽略的:

// 不會被npm忽略的文件
package.json
README (and its variants)
CHANGELOG (and its variants)
LICENSE / LICENCE

// 必定會忽略的
node_modules
.*.swp
._*
.DS_Store
.git
.hg
.npmrc
.lock-wscript
.svn
.wafpickle-*
config.gypi
CVS
npm-debug.log

3.使用babel cli

如今，拜babel的強大功能，前端愈來愈多的使用更方便、更強大的語法，如ES六、ES七、jsx等，來編寫代碼。在發佈代碼前，咱們必需要考慮到用戶的使用環境，他們可能不使用這些語法進行開發，那麼，最好的作法就是把全部源代碼轉譯成兼容的ES5代碼。仔細看上面的目錄，會發現發佈的組件並非咱們的源代碼/src，而是編譯到/lib和/dist的js文件。

首先，要先安裝babel cli，安裝好後就可使用babel命令編譯

npm install --save-dev babel-cli

第二步，配置.babelrc文件，把你須要的babel插件添加進去。若是你使用webpack，就能夠把babel-loader的配置項項目複製到這個配置文件，如下是我一個React項目的配置：

{
  "presets": [
    "es2015",
    "stage-2",
    "react"
  ],
  plugins: ['transform-decorators-legacy'],
}

其中plugins配置的是ES7裝飾者（非必需）。接下來，在package.json中配置腳原本運行babel：

"scripts": {
  "clean": "rd /s/q lib && mkdir lib",
  "lib": "npm run clean && babel src --out-dir lib 
},

這裏，先清空lib目錄，而後將/src的源文件，用babel轉譯至/lib目錄下，/lib就是咱們要發佈的目錄，在DOS中鍵入npm run lib就能看到效果了。固然，腳本的具體配置因項目而異。

4.發佈

至此，爲項目取個不重複的響亮名字，在DOS項目目錄下輸入npm publish就能發佈你的組件了。每次發佈時，須要注意更新版本號:

通常來說大部分的軟件版本號分3段，好比 A.B.C

• A 表示大版本號，通常當軟件總體重寫，或出現不向後兼容的改變時，增長A，A爲零時表示軟件還在開發階段。

• B 表示功能更新，出現新功能時增長B

• C 表示小修改，如修復bug，只要有修改就增長C

爲了讓更多人瞭解發佈的包，務必加上精煉的README文檔，中、英文最好。

5.組件質量認證

一個包可以被用戶採用，除了功能知足需求，穩定的版本、充分的測試、準確地文檔、合適的樣例、npm下載量等等，均可能是用戶的考察項。另外，最好將你的項目開源到github上，github可以自動鏈接CI服務，在線上測試你的代碼，並提供諸如代碼覆蓋率報告等服務，並把這些信息用小標籤的形式展示出來，來給包的質量背書。下面是antd的小標籤：

若是對如何得到這些標籤感興趣，能夠關注我以後的文章(ง •̀_•́)ง。

寫在最後

中國互諒網行業的快速發展全世界有目共睹，但願在開源生態裏，能看到愈來愈多的中國名字。

★★react-freecolor★★是我開發一個react組件，沒開發完，但目錄結構和項目配置基本成型，有興趣的能夠看看。

參考

• understand npm

• 軟件的版本號是如何肯定的？

• shields.i

• 4bin's Blog