npm包管理工具前端同学应该不陌生了，npm平台上有大量的优秀包，我们只需要简单几行命令就能down下来我们想要的东西，不用到处求种，而且版本控制十分方便。如何将自己的组件或者插件发布到npm平台上去，方便项目中使用和其他人使用，本文介绍如何将一个react组件发布到npm平台上去。
在实际动手之前，先要查阅资料预见困难，分析执行步骤：
- 一个包的格式，应该有哪些东西。
- 将项目发布到npm平台上去。
- 持续集成。
组件格式
发布到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
这里要注意的点：
- 原文件：项目原文件在
src下，原文件用ES6编写。原文件不可直接使用，需要打包编译之后才能使用。 - 编译：这里的编译有两种方式：使用
babel编译；使用webpack编译。前者只能编译js，后者则可以编译很多类型的文件。我这里使用的babel编译，命令：./node_modules/.bin/babel src --copy-files --source-maps --extensions .js --out-dir lib将src目录下的js文件编译到lib目录下。 - 样式：scss样式引入也有两种：使用sass命令编译，输出到根目录
style.css；使用webpack编译src文件的时候，将样式打包编译到js文件里。两者区别也很明显：前者需要手动编译，也需要手动引入，比较麻烦，但是文件独立，方便管理；后者自动编译，样式扩展性较差。各有取舍。 - demo：项目里有个
example文件夹，里面是项目示例代码，本地开发的时候跑的项目；也有的包里面是docs文件夹，文档形式介绍。 - 测试：有的包本地开发的时候会有测试脚本，本地会有一个
test文件夹，用于存放测试脚本。
项目完成之后，需要添加一个入口文件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
- A表示大版本号，一般是项目较大改动的时候修改，可以参考理解iOS6 更新到iOS7 时候界面大幅改动；A为0的时候，表示项目处于开发阶段。
- B表示功能更新，或者项目模块改动的时候增加。
- C表示小改动，如修bug。
持续集成
一般来说你会看到一些项目README.md里面有一些icon如：
这些icon看起来很牛逼，但也不只是装逼用的。
持续集成(Continuous integration)的目的，就是让产品可以快速迭代，同时还能保持高质量。它的核心措施是，代码集成到主干之前，必须通过自动化测试。只要有一个测试用例失败，就不能集成。
每个icon都表示一个功能，这里不多做介绍，有兴趣可以看看下列文章：
总结
经过上述操作，就可以完成了向npm平台发布一个包的过程，发布到npm的组件要持续维护。
