npm製做插件、發佈及更新（超詳細步驟、說明）

最近項目須要無狀態的純組件，因此咱們把組件封裝了一下，再製做成了插件，直接引用，把製做插件心得總結寫了下來分享出來，讓你們能夠從零開始製做本身的插件。

製做插件

1. 安裝node及npm，以後新建一個文件夾，在終端中打開，執行命令npm init,一路回車而後輸入yes便可，生成一個package.json， { "name": "swTest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" },其中name就是插件的名稱，默認是文件夾名字；version爲版本號，注意每次發佈新版本的時候須要手動更新版本號；description是描述；main是入口文件，加載這個插件時讀的文件，這個也是最重要的屬性，這個屬性是別人引用你的插件時，讀取的入口文件，在這個文件裏，須要你向外暴露接口；author是做者，能夠是npm註冊的名字。

2. 在根目錄下新建src文件夾，裏面存放的就是本身的代碼片斷。

3. 在根目錄下新建個 .npmignore（注意要有個.），裏面就是npm在發佈時會忽略項目中的文件。

4. 在根目錄下新建README.md，裏面是發佈到npm時項目介紹。

babel轉義

由於不少語法都是ES6及以上，因此須要轉義成ES5。

1. 全局安裝Babel: npm install -g babel-cli
2. ES6轉碼規則: npm install babel-preset-es2015 --save-dev
3. react轉碼規則: npm install babel-preset-react --save-dev
4. ES7不一樣階段語法提案的轉碼規則: npm install babel-preset-stage-0 --save-dev (0 - 3均可以)
5. 根目錄下新建.babelrc（一樣有.）；加入規則 { "presets": [ "es2015", "react", "stage-2" ], "plugins": [] }。vue的戳這裏
6. 通常咱們是將代碼寫在src裏面，而後將整個src轉義成es5，根目錄下運行代碼 babel src --out-dir lib ，獲得lib文件夾，就是src轉義以後的文件了。
7. 修改package.json，裏面main修改成lib/index。
8. 修改.npmignore文件，增長src/ node_modules/ package-lock.json

️發佈插件

1. 沒有npm帳號的先去npm官網註冊，官方網站是：https://www.npmjs.com/;
2. 先修改package.json中的name，修改爲你的插件名,而後在npm官網查詢是否已經被註冊了這個名字，有的話修改一下；
3. 項目根目錄下執行npm adduser,輸入npm的帳號密碼還有郵箱，缺一不可。（注：若是已有賬號，則輸入npm login登陸，帳號密碼還有郵箱，也是缺一不可，若是報錯code E409，是由於使用的淘寶npm，致使登陸失誤，由於登陸的是淘寶的npm 倉庫源，淘寶應該不會給你提供登陸服務把npm registry換成官方的就能夠了，運行代碼：nrm use npm,若是報錯，是由於沒有安裝nrm，運行代代碼npm install -g nrm安裝nrm再執行代碼：nrm use npm便可）；
4. 能夠運行npm whoami查看當前用戶是不是本身；
5. 運行代碼npm publish進行發佈；
6. 能夠在npm官網右上角點擊packages查看本身發佈的，有的話發佈就成功啦；
7. 在項目之中能夠引進本身的插件npm install xxx --save-dev進行使用啦；

️維護插件

1. 對插件代碼功能進行了拓展或者修改，須要從新發布新版本，除了改代碼以外，須要每次手動把package.json中的version進行修改，這是版本號，表明版本改動了。npm使用的版本號規則是semver語義化版本，初始化是1.0.0，依次是主版號.次版號.修訂號，主版號是不相容的API修改，次版號是功能性新增，修訂號是問題修正。
2. 修改了以後再運行一次babel src --out-dir lib獲得最新的lib,再執行npm publish進行發佈；
3. 發佈以後在運用的項目如何更新呢？（1）若是是npm，因爲是本身的插件，能夠知道本身的版本修改爲了什麼，在項目中package.json裏面找到依賴包版本，手動改爲最新的版本號，而後項目運行npm install --force就能夠了；（2）若是是yarn，運行yarn upgrade也ok；（3）因爲項目中的依賴包會發生更新，因此有時候咱們會安裝第三方插件進行查看，npm install -g npm-check-updates,運行ncu 查看可更新包,ncu -u更新package.json,npm install升級到最新版本便可。

再來點乾貨，安裝插件時，--save-dev是你開發時候依賴的東西，--save是你發佈以後依賴的東西。-g表示全局安裝，--save-dev 能夠簡寫爲 -D ，--save 能夠簡寫爲 -S ，npm install 能夠簡寫爲 npm i。

代碼已經傳上github,github地址，歡迎你們訪問 （地址：https://github.com/Songwei1029/create-plug）,有問題歡迎留言。