npm製作外掛、釋出及更新

Songwei1029發表於2018-12-28
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": [] }
  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的賬號密碼還有郵箱，缺一不可；
  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. 修改了之後再執行一次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）,有問題歡迎留言。

相關文章