npm包管理工具前端同学应该不陌生了，npm平台上有大量的优秀包，我们只需要简单几行命令就能down下来我们想要的东西，不用到处求种，而且版本控制十分方便。如何将自己的组件或者插件发布到npm平台上去，方便项目中使用和其他人使用，本文介绍如何将一个react组件发布到npm平台上去。

在实际动手之前，先要查阅资料预见困难，分析执行步骤：

1. 一个包的格式，应该有哪些东西。
2. 将项目发布到npm平台上去。
3. 持续集成。
@H_404_11@

组件格式

发布到npm平台的包，是一个项目工程，跟我们平时工作中的项目类似，应该有完整的一套构建，开发，测试，打包压缩等步骤，所以应该把这个包当成一个项目来对待。

​qj-button
├── example                   # 存放demo的代码
│    ├── src
│    │    ├── ButtonPage.js   
│    │    └── index.js          # 示例的入口文件
│    └── index.html            # 示例页面
├── lib                          # 真实引用编译过的代码
│   └── Button.js              # 编译过的源码
├── src                          # 存放源码的目录
│   └── Button.js              # 组件源码
├── style                      # 样式文件
│    ├── base.scss
│    ├── button.scss
│    └── common.scss
├── .bebalrc                   # babel配置文件
├── .travis.yml                  # travis配置文件
├── index.js                  # 项目入口文件
├── style.css                  # 项目样式文件
├── package.json            
├── postcss.config.json
├── webpack.config.json       # 项目开发demo的时候 需要用到的webpack
└── README.md

这里要注意的点：

1. 原文件：项目原文件在src下，原文件用ES6编写。原文件不可直接使用，需要打包编译之后才能使用。
2. 编译：这里的编译有两种方式：使用babel编译；使用webpack编译。前者只能编译js，后者则可以编译很多类型的文件。我这里使用的babel编译，命令：./node_modules/.bin/babel src --copy-files --source-maps --extensions .js --out-dir lib将src目录下的js文件编译到lib目录下。
3. 样式：scss样式引入也有两种：使用sass命令编译，输出到根目录style.css；使用webpack编译src文件的时候，将样式打包编译到js文件里。两者区别也很明显：前者需要手动编译，也需要手动引入，比较麻烦，但是文件独立，方便管理；后者自动编译，样式扩展性较差。各有取舍。
4. demo：项目里有个example文件夹，里面是项目示例代码，本地开发的时候跑的项目；也有的包里面是docs文件夹，文档形式介绍。
5. 测试：有的包本地开发的时候会有测试脚本，本地会有一个test文件夹，用于存放测试脚本。
@H_404_11@

项目完成之后，需要添加一个入口文件index.js，将你的组件导出：

module.exports = require('./lib/Button');
exports.default = require('./lib/Button');

需要改一下package.json里面的配置文件：

{
  "main": "index.js","style": "style.css","files": [
    "lib"
  ]
}

上述代码指定入口文件和样式文件，并且发布的时候，只发布lib目录下文件和其余根目录的文件，其余的文件夹里的会传到github上，并不会被发布到npm平台上。

// 不会被npm忽略的文件
package.json
README (and its variants)
CHANGELOG (and its variants)
LICENSE / LICENCE

// 一定会忽略的
node_modules
.*.swp
._*
.DS_Store
.git
.hg
.npmrc
.lock-wscript
.svn
.wafpickle-*
config.gypi
CVS
npm-debug.log

npm发布

项目已经准备好了，接下来可以着手发布了。首先npm上注册账号，别忘了去邮箱验证。然后输入：

npm adduser

接下来会以问答的形式向你了解你的用户名、密码以及公开的邮箱，之后输入

npm publish

然后看到进度条走，之后组件发布成功，可以到npm上搜索自己的包了。

这块可能会遇到一些报错，请看这里。

最后说一下版本管理。

一般来说版本分成三部分：A.B.C

1. A表示大版本号，一般是项目较大改动的时候修改，可以参考理解iOS6 更新到iOS7 时候界面大幅改动；A为0的时候，表示项目处于开发阶段。
2. B表示功能更新，或者项目模块改动的时候增加。
3. C表示小改动，如修bug。
@H_404_11@

持续集成

一般来说你会看到一些项目README.md里面有一些icon如：

这些icon看起来很牛逼，但也不只是装逼用的。

持续集成(Continuous integration)的目的，就是让产品可以快速迭代，同时还能保持高质量。它的核心措施是，代码集成到主干之前，必须通过自动化测试。只要有一个测试用例失败，就不能集成。

每个icon都表示一个功能，这里不多做介绍，有兴趣可以看看下列文章：

1. 跟踪Github项目的持续集成状态
2. 使用travis-ci集成一个vue.js项目
@H_404_11@

总结

经过上述操作，就可以完成了向npm平台发布一个包的过程，发布到npm的组件要持续维护。

项目源码地址

参考

1. 八步亲手用npm开发React
2. 在npm上发布你的组件
3. 如何使用 ES6 编写一个 React 模块,并且编译后发布到 NPM
4. 如何发布Node模块到NPM社区
@H_404_11@