最近有同事在搞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插件的制作。
