npm制做插件、发布及更新（超详细步骤、说明）

最近项目须要无状态的纯组件，因此咱们把组件封装了一下，再制做成了插件，直接引用，把制做插件心得总结写了下来分享出来，让你们能够从零开始制做本身的插件。

制做插件

1. 安装node及npm，以后新建一个文件夹，在终端中打开，执行命令npm init,一路回车而后输入yes便可，生成一个package.json， { "name": "swTest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" },其中name就是插件的名称，默认是文件夹名字；version为版本号，注意每次发布新版本的时候须要手动更新版本号；description是描述；main是入口文件，加载这个插件时读的文件，这个也是最重要的属性，这个属性是别人引用你的插件时，读取的入口文件，在这个文件里，须要你向外暴露接口；author是做者，能够是npm注册的名字。

2. 在根目录下新建src文件夹，里面存放的就是本身的代码片断。

3. 在根目录下新建个 .npmignore（注意要有个.），里面就是npm在发布时会忽略项目中的文件。

4. 在根目录下新建README.md，里面是发布到npm时项目介绍。

babel转义

由于不少语法都是ES6及以上，因此须要转义成ES5。

1. 全局安装Babel: npm install -g babel-cli
2. ES6转码规则: npm install babel-preset-es2015 --save-dev
3. react转码规则: npm install babel-preset-react --save-dev
4. ES7不一样阶段语法提案的转码规则: npm install babel-preset-stage-0 --save-dev (0 - 3均可以)
5. 根目录下新建.babelrc（一样有.）；加入规则 { "presets": [ "es2015", "react", "stage-2" ], "plugins": [] }。vue的戳这里
6. 通常咱们是将代码写在src里面，而后将整个src转义成es5，根目录下运行代码 babel src --out-dir lib ，获得lib文件夹，就是src转义以后的文件了。
7. 修改package.json，里面main修改成lib/index。
8. 修改.npmignore文件，增长src/ node_modules/ package-lock.json

️发布插件

1. 没有npm帐号的先去npm官网注册，官方网站是：https://www.npmjs.com/;
2. 先修改package.json中的name，修改为你的插件名,而后在npm官网查询是否已经被注册了这个名字，有的话修改一下；
3. 项目根目录下执行npm adduser,输入npm的帐号密码还有邮箱，缺一不可。（注：若是已有账号，则输入npm login登陆，帐号密码还有邮箱，也是缺一不可，若是报错code E409，是由于使用的淘宝npm，致使登陆失误，由于登陆的是淘宝的npm 仓库源，淘宝应该不会给你提供登陆服务把npm registry换成官方的就能够了，运行代码：nrm use npm,若是报错，是由于没有安装nrm，运行代代码npm install -g nrm安装nrm再执行代码：nrm use npm便可）；
4. 能够运行npm whoami查看当前用户是不是本身；
5. 运行代码npm publish进行发布；
6. 能够在npm官网右上角点击packages查看本身发布的，有的话发布就成功啦；
7. 在项目之中能够引进本身的插件npm install xxx --save-dev进行使用啦；

️维护插件

1. 对插件代码功能进行了拓展或者修改，须要从新发布新版本，除了改代码以外，须要每次手动把package.json中的version进行修改，这是版本号，表明版本改动了。npm使用的版本号规则是semver语义化版本，初始化是1.0.0，依次是主版号.次版号.修订号，主版号是不相容的API修改，次版号是功能性新增，修订号是问题修正。
2. 修改了以后再运行一次babel src --out-dir lib获得最新的lib,再执行npm publish进行发布；
3. 发布以后在运用的项目如何更新呢？（1）若是是npm，因为是本身的插件，能够知道本身的版本修改为了什么，在项目中package.json里面找到依赖包版本，手动改为最新的版本号，而后项目运行npm install --force就能够了；（2）若是是yarn，运行yarn upgrade也ok；（3）因为项目中的依赖包会发生更新，因此有时候咱们会安装第三方插件进行查看，npm install -g npm-check-updates,运行ncu 查看可更新包,ncu -u更新package.json,npm install升级到最新版本便可。

再来点干货，安装插件时，--save-dev是你开发时候依赖的东西，--save是你发布以后依赖的东西。-g表示全局安装，--save-dev 能够简写为 -D ，--save 能够简写为 -S ，npm install 能够简写为 npm i。

代码已经传上github,github地址，欢迎你们访问 （地址：https://github.com/Songwei1029/create-plug）,有问题欢迎留言。