NPM 包管理與發佈

最近試着發佈了一兩個NPM包，一個是mapbox 的一些插件類，另外一個是vudio，一個音頻可視化的庫。簡單記錄下NPM 包管理的一些操做，主要是發佈包的一些概念和注意點

關鍵字段

首先，咱們得有一個有package.json 文件的文件夾，其中有幾個關鍵字段須要注意。

NPM包name 和version 是必須的，version 得是符合semversion 規範的，也就是 major.minor.patch 三個數字組成，大版本小版本和patch。好比每次 npm publish 以前能夠經過npm version minor 去自動增長一個小版本數字，會自動修改package.json 中的 version 值。也就是說最好不要手動改 package.json文件中的version 字段。

好比vudio 的版本號原本是 2.0.3, 腳本自動增長版本號後，再經過 npm version 查看當前的版本信息

npm version minor
npm version
> { vudio: '2.0.4',
  npm: '5.5.1',
...
}

npm publish
複製代碼

main，browser 字段

以個人vudio 包package文件爲例

// package.json of my NPM package Vudio
{
  "name": "vudio",
  "version": "2.0.4",
  "description": "visualization audio using AudioContext and Canvas",
  "main": "umd/vudio.js",  // 若是是esModule 或者node.js的包，把入口文件填這裏
  "browser": "umd/vudio.js",  // 若是這個包針對瀏覽器環境，那填這裏
  "files": [
    "umd",
    "*"
  ]
}
複製代碼

這幾個字段比較有用，main字段標識了你 npm 包的入口，好比別人安裝了個人包， 在 nodejs 程序中 require 我導出的模塊對象，實際上就會去packge.json中查找 main 字段，到底指的是哪一個js 文件

var Vudio = require('vudio')
// 實際上等效於
var Vudio = require('vudio/umd/vudio.js')

複製代碼

經過require或者import引入NPM包時，是讀取 main 字段來獲取入口文件地址。這主要針對符合common.js和esModule 模塊規範的第三方NPM 包。若是你要發佈的NPM 包只能在 browser 環境下運行，好比要依賴 window，DOM這類瀏覽器環境下的要素。那能夠直接給 browser 字段指定你的 umd 文件地址，也就是通用模塊定義文件。

UMD 模塊定義方式

這種導出模塊的典型特徵就是適配各類運行環境，無論是瀏覽器仍是nodejs環境，均可以順利導出模塊，優雅適配

// 典型的umd 模塊導出
(function(factory){
    if (typeof exports === 'object') {  // 支持Common.js 
         module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {  // 支持AMD
         define(factory); 
    } else {
         window.Vudio = factory();   // 瀏覽器環境
    }

 })(function() {
    /// 你的功能
    function Vudio(){
    //// .....
    }
    return Vudio
})

複製代碼

這樣 npm publish 以後就能夠在npm倉庫裏查到你的包了。有個問題就是publish 以前得 npm login 下，另外要確保你的 package name 是全網惟一，否則會提示 403，沒有權限提交。

提交給CDN

除了把NPM包發佈給 官方倉庫，還能夠順手提交給 unpkg.com/ 這樣的 CDN 網站，其實是Cloudflare 提供的CDN 服務。 主要作到兩點：

• 添加 umd (or dist) 文件夾到 .gitignore 文件中，也就是說在git repo 裏面忽略這個用於發佈包的文件夾
• 把 umd 文件夾地址添加到package.json的 files array 字段中

files字段指的是，你要把哪些文件、文件夾包含在NPM包裏面。這樣你 npm publish 的時候只會把這部分文件（一般是必要的，無我的數據的）打包 tgz 提交給npm 倉庫。

配置完成後，npm publish 以後就能夠在unpkg CDN 上查到本身的包了. 通常地址是 unpkg.com/:package@:version/:file

參考文檔：

建立和發佈NPM包的官方文檔