將你的組件發佈到npm平臺上

npm包管理工具前端同窗應該不陌生了，npm平臺上有大量的優秀包，咱們只須要簡單幾行命令就能down下來咱們想要的東西，不用處處求種，並且版本控制十分方便。如何將本身的組件或者插件發佈到npm平臺上去，方便項目中使用和其餘人使用，本文介紹如何將一個react組件發佈到npm平臺上去。

在實際動手以前，先要查閱資料預見困難，分析執行步驟：

1. 一個包的格式，應該有哪些東西。
2. 將項目發佈到npm平臺上去。
3. 持續集成。

組件格式

發佈到npm平臺的包，是一個項目工程，跟咱們平時工做中的項目相似，應該有完整的一套構建，開發，測試，打包壓縮等步驟，因此應該把這個包當成一個項目來對待。

​qj-button
├── example                   # 存放demo的代碼
│    ├── src
│    │    ├── ButtonPage.js   
│    │    └── index.js          # 示例的入口文件
│    └── index.html            # 示例頁面
├── lib                          # 真實引用編譯過的代碼
│   └── Button.js              # 編譯過的源碼
├── src                          # 存放源碼的目錄
│   └── Button.js              # 組件源碼
├── style                      # 樣式文件
│    ├── base.scss
│    ├── button.scss
│    └── common.scss
├── .bebalrc                   # babel配置文件
├── .travis.yml                  # travis配置文件
├── index.js                  # 項目入口文件
├── style.css                  # 項目樣式文件
├── package.json            
├── postcss.config.json
├── webpack.config.json       # 項目開發demo的時候 須要用到的webpack
└── README.md

這裏要注意的點：

1. 原文件：項目原文件在src下，原文件用ES6編寫。原文件不可直接使用，須要打包編譯以後才能使用。
2. 編譯：這裏的編譯有兩種方式：使用babel編譯；使用webpack編譯。前者只能編譯js，後者則能夠編譯不少類型的文件。我這裏使用的babel編譯，命令：./node_modules/.bin/babel src --copy-files --source-maps --extensions .js --out-dir lib將src目錄下的js文件編譯到lib目錄下。
3. 樣式：scss樣式引入也有兩種：使用sass命令編譯，輸出到根目錄style.css；使用webpack編譯src文件的時候，將樣式打包編譯到js文件裏。二者區別也很明顯：前者須要手動編譯，也須要手動引入，比較麻煩，可是文件獨立，方便管理；後者自動編譯，樣式擴展性較差。各有取捨。
4. demo：項目裏有個example文件夾，裏面是項目示例代碼，本地開發的時候跑的項目；也有的包裏面是docs文件夾，文檔形式介紹。
5. 測試：有的包本地開發的時候會有測試腳本，本地會有一個test文件夾，用於存放測試腳本。

項目完成以後，須要添加一個入口文件index.js，將你的組件導出：

module.exports = require('./lib/Button');
exports.default = require('./lib/Button');

須要改一下package.json裏面的配置文件：

{
  "main": "index.js",
  "style": "style.css",
  "files": [
    "lib"
  ]
}

上述代碼指定入口文件和樣式文件，而且發佈的時候，只發布lib目錄下文件和其他根目錄的文件，其他的文件夾裏的會傳到github上，並不會被髮布到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

npm發佈

項目已經準備好了，接下來能夠着手發佈了。首先npm上註冊帳號，別忘了去郵箱驗證。而後輸入：

npm adduser

接下來會以問答的形式向你瞭解你的用戶名、密碼以及公開的郵箱，以後輸入

npm publish

而後看到進度條走，以後組件發佈成功，能夠到npm上搜索本身的包了。

這塊可能會遇到一些報錯，請看這裏。

最後說一下版本管理。

通常來講版本分紅三部分：A.B.C

1. A表示大版本號，通常是項目較大改動的時候修改，能夠參考理解iOS6 更新到iOS7 時候界面大幅改動；A爲0的時候，表示項目處於開發階段。
2. B表示功能更新，或者項目模塊改動的時候增長。
3. C表示小改動，如修bug。

持續集成

通常來講你會看到一些項目README.md裏面有一些icon如：

這些icon看起來很牛逼，但也不僅是裝逼用的。

持續集成(Continuous integration)的目的，就是讓產品能夠快速迭代，同時還能保持高質量。它的核心措施是，代碼集成到主幹以前，必須經過自動化測試。只要有一個測試用例失敗，就不能集成。

每一個icon都表示一個功能，這裏很少作介紹，有興趣能夠看看下列文章：

1. 跟蹤Github項目的持續集成狀態
2. 使用travis-ci集成一個vue.js項目

總結

通過上述操做，就能夠完成了向npm平臺發佈一個包的過程，發佈到npm的組件要持續維護。

項目源碼地址

參考

1. 八步親手用npm開發React
2. 在npm上發佈你的組件
3. 如何使用 ES6 編寫一個 React 模塊, 而且編譯後發佈到 NPM
4. 如何發佈Node模塊到NPM社區