本文主要給各位分享如何快速創(chuàng)建node插件并發(fā)布到npm上。
npm是一個讓JavaScript程序員分享和復(fù)用代碼的工具，我們不僅可以install別人的插件，也可以publish自己的代碼。

npm install太多，是時候publish一波

1.初始化一個node項目

我暫且將這個node插件命名為my-plugin，創(chuàng)建目錄my-plugin，進入目錄，使用npm init --yes默認方式初始化node項目，命令窗口命令如下：

$ mkdir my-plugin
$ cd my-plugin
$ npm init --yes

這時候在項目目錄下生成了package.json，以下是文件的基本配置。

  "name": "my-plugin",
  "version": "1.0.0",
  "description": "一個簡單的插件",
  "main": "myPlugin.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/xxx/my-plugin.git"
  },
  "keywords": [
    "my",
    "plugin"
  ],
  "author": "名字",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/xxx/my-plugin/issues"
  }
}

package.json相關(guān)字段說明如下

• name 插件的名字

• version 插件版本號

• description 插件描述

• author 作者名

• main 入口文件路徑，require(name)將根據(jù)這個路徑來引入

• keywords 關(guān)鍵詞，使用數(shù)組形式，方便npm官網(wǎng)搜索

• scripts 命令行，通過npm run 執(zhí)行

• license 許可證書，一般開源是MIT

• repository github倉庫項目地址

這里我將在項目目錄下創(chuàng)建myPlugin.js作為主代碼文件，因此需要將main字段設(shè)置為myPlugin.js，這樣當(dāng)別人install你的插件時，使用require('my-plugin')等同于require('node_modules/my-plugin/myPlugin.js')。

my-plugin目錄下創(chuàng)建以下文件：

my-plugin
├── myPlugin.js                #主代碼
├── LICENSE                     #許可證書
├── package.json                #npm配置文件
├── README.md                   #插件說明

LICENSE我們可以直接在github倉庫上生成，步驟：create new file
-> 文件名輸入LICENSE -> 右側(cè)選擇類型，這里一般選擇MIT。

MIT License

Copyright (c) 2017 myName

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

2.創(chuàng)建代碼

下面我在myPlugin.js里實現(xiàn)一個簡單的功能，創(chuàng)建一個對象，實現(xiàn)一個延遲函數(shù)sleep。

// myPlugin.js
function myPlugin() {
    return {
        sleep: sleep
    }
}
function sleep(long) {
  var start = Date.now();
  while((Date.now() - start) < long){
  }
  console.log('finish!');
}
module.exports = myPlugin();

上方代碼使用module.exports導(dǎo)出對象，在node環(huán)境下，我們通過一下方式調(diào)用：

var myPlugin = require('my-plugin'); // or import myPlugin from 'my-plugin'
myPlugin.sleep(2000);

require最終如果開發(fā)的插件只是一個運行在node環(huán)境模塊，只需 就可以，如上方代碼，如果想要在瀏覽器端也能運行插件，我們就需要兼容各種構(gòu)建環(huán)境了。以下代碼借鑒了著名的q模塊（早期實現(xiàn)promise的polyfill），將代碼片段作為參數(shù)傳進兼容器。

// myPlugin.js
(function (definition) {
    "use strict";
    // CommonJS
     if (typeof exports === "object" && typeof module === "object") {
        module.exports = definition();
    // RequireJS
    } else if (typeof define === "function" && define.amd) {
        define(definition);
    // <script>
    } else if (typeof window !== "undefined" || typeof self !== "undefined") {
        // Prefer window over self for add-on scripts. Use self for
        // non-windowed contexts.
        var global = typeof window !== "undefined" ? window : self;

        // initialize myPlugin as a global.
        global.myPlugin = definition();

    } else {
        throw new Error("This environment was not anticipated by myPlugin,Please file a bug.");
    }
})(function () {
  function myPlugin() {
      return {
        sleep: sleep
      }
  }
  function sleep(long) {
    var start = Date.now();
    while((Date.now() - start) < long){}
    console.log('finish!');
  }
  return myPlugin();
})

其中，按照commonJS語法規(guī)范，兼容node環(huán)境和webpack等構(gòu)建工具，我們使用module.exports；使用define(myPlugin)的amd語法兼容requireJS；最后如果只是在html頁面script的方式調(diào)用，將對象賦值給window.myPlugin。

// html
<script src='my-plugin/myPlugin.js'></script>
// js
if (window.myPlugin) console.log('this is my plugin!');

3.發(fā)布

一個簡單的node插件已經(jīng)開發(fā)完了，現(xiàn)在我們要把它發(fā)布到npm官網(wǎng)上，供各位碼友安（cai）裝（keng）。首次發(fā)布，需要在npm官網(wǎng)上注冊你的賬號，下次直接npm login進行登錄。

$ npm adduser //注冊賬號
Username: YOUR_USER_NAME
Password: YOUR_PASSWORD
Email: YOUR_EMAIL@domain.com
$ npm publish . //發(fā)布

現(xiàn)在，在npm官網(wǎng)上輸入my-plugin便可以搜到你發(fā)布的包啦，你可以直接通過npm install my-plugin或yarn add my-plugin將剛剛發(fā)布的插件安裝到自己的項目。
最后，如果發(fā)現(xiàn)插件有bug了，修改后想要重新發(fā)布，直接執(zhí)行npm push .會報錯，由于npm檢查到你發(fā)布的version版本已經(jīng)存在，所以需要更新你的版本號才能重新發(fā)布，此時需要以下命令：

$ npm version patch

此時你會發(fā)現(xiàn)package.json的version字段由0.0.0提升至0.0.1，現(xiàn)在再執(zhí)行npm publish，可以看到你的包已經(jīng)在npm官網(wǎng)完成更新。

其它

以上是node插件發(fā)布的簡單流程，實際上node插件開發(fā)還包含很多場景，一個大型的項目還需要考慮單元測試、代碼壓縮、集成測試等等。
一個完整的node插件目錄結(jié)構(gòu)一般如下：

大型node插件目錄結(jié)構(gòu)

.
├── bin                         #運行目錄
├── lib                         #主代碼目錄
├── example                     #示例目錄
├── test                        #測試目錄，提供單元測試
├── .travis.yml                 #集成自動測試配置
├── .npmignore                  #npm發(fā)布時忽略的文件
├── CHANGELOG.md               #版本更新說明
├── LICENSE                     #許可證書
├── package.json                #npm配置
├── README.md                   #README

相關(guān)鏈接：
阮一峰npm模塊管理
我的示例插件