npm插件制作及發布基礎教程

　　最近有同事在搞npm插件，想用了這么久的npm也沒有自己制作一個插件出來練一練，所以動手把之前的圖片隨手勢移動的react組件改寫成了npm插件，之前的博客地址http://www.cnblogs.com/wunan/p/5801835.html。

　　首先需要在npm官網注冊自己的賬號，這個在發布的時候需要關聯。

　　（默認電腦已安裝node及npm）之后隨便在電腦上新建一個文件夾，然后執行

npm init

　　然后里面需要填寫的信息可以都不填寫，直接一路按回車到底，會生成一個package.json的文件，發布版本時最重要的是main這個屬性，這個屬性是別人引用你的插件時，讀取的入口文件，在這個文件里，需要你向外暴露接口。

{
  "name": "npm", //項目或者插件的名字
  "version": "1.0.0", //版本號，每次發布新版本的時候需要手動更新版本號
  "description": "",
  "main": "index.js", //入口文件，加載這個插件時讀的文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "", //作者，這個名字可以是你注冊npm賬號的名字
  "license": "ISC"
}

　　下面是我現在已經完成的插件的文件結構：

　　下面是我的package.json文件的配置：

{
  "name": "react-image-slide",
  "version": "1.0.5",
  "description": "",
  "scripts": {
  },
  "author": "mengxinghun",
  "license": "ISC",
  "main": "lib/index.js",
  "devDependencies": {
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "css-loader": "^0.23.1",
    "node-sass": "^3.8.0",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

　　因為我的入口文件在lib下，所以在package.json里main下的路徑為'lib/index.js'。

　　在index.js里面需要把這個組件向外暴露接口，所以最外層的組件需要寫成下面這樣，這樣別人就可以通過import加載你的插件。

export default class Parent extends React.Component{}

　　這個插件現在已經發布到了npm，大家可以在剛剛 npm init的文件夾下執行以下指令來看源代碼

npm i react-image-slide --save-dev

　　在完成插件制作后就到了發布，執行以下命令

npm adduser    

　　執行后會讓輸入你的npm賬號的相關信息，如果出現錯誤，可能是你的npm版本太低，通過npm install -g npm升級一下。

　　成功之后，可以通過以下命令查看npm當前使用的用戶：

npm whoami 

　　最后執行發布插件的命令

npm publish

　　每次發布都需要發布者手動修改json文件中插件的版本號，不然發布會報錯，npm社區版本號規則采用的是semver(語義化版本)，主要規則如下：

版本格式：主版號.次版號.修訂號，版號遞增規則如下：
    主版號：當你做了不相容的 API 修改，
    次版號：當你做了向下相容的功能性新增，
    修訂號：當你做了向下相容的問題修正。
    先行版號及版本編譯資訊可以加到「主版號.次版號.修訂號」的后面，作為延伸。

　　發布完成后你就可以在npm搜索到你自己制作的插件了。

　　插件在本地安裝后，直接引入，並參照readme中的描述按要求做相應配置，就可以使用了。

import React from 'react'
import ReactDom from 'react-dom'
import Parent from 'react-image-slide'

let imgArray = [
    'http://tupian.enterdesk.com/2013/lxy/07/27/6/1.jpg',
    'http://bizhi.zhuoku.com/wall/jie/20070409/huoying/113.jpg',
    'http://i3.17173cdn.com/2fhnvk/YWxqaGBf/cms3/tUcIQCbjFFjdgfr.jpg',
    'http://n.sinaimg.cn/games/transform/20160722/6sHg-fxuhukz0771063.jpg',
    'http://img4.imgtn.bdimg.com/it/u=1422978104,3773037432&fm=21&gp=0.jpg',
]

ReactDom.render(
    <Parent images={imgArray} />,
      document.getElementById('app')
);

　　如有問題，感謝斧正，我會隨時修改，讓大家都能自己完成npm插件的制作。