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插件的製做。