在npm上发布你的组件

现现在npm已经成为前端开发中必不可少的一部分，目前在npm上发布的包超过34万个，每周仍有超过1万个新包被发布，包一周下载量超过十亿次。做为一名好奇的前端，天然但愿能把本身造的轮子让更多人看到。不一样于传统的js模块，发布咱们的组件还须要多一丢丢东西要作：

1. 设置npm帐号

2. 设置忽略项

3. 使用babel cli

4. 发布

5. 组件质量认证

1.设置npm帐号

首先，要在npm发布包，首先得注册一个帐号，与github同样，npm对于公共包是免费的。

第二步，添加帐号。在咱们的Dos环境下，输入命令npm adduser，而后键入你在npm上注册的帐号和密码。另外，npm config ls能够查看你的npm配置。

接下来，使用npm publish就能够发布你的包了。但在发布以前，咱们还有一些工做要作。

2.设置忽略项

一个简单的js模块可能就只须要一个js文件，而一个完善的组件，每每还须要测试、文档、样例等目录，对于ES6或其余语法编写的源代码，还会有编译的目录。例如，ant-design的项目目录：

|-components
|-coverage
|-dist
|-docs
|-lib
|-node_modules
|-scripts
|-site
|-tests
|-typings
|-.babelrc
|-.gitignore
|-package.json
|-webpack.config.js
|-...

咱们不须要把全部文件或目录提交到npm包，能够看到antd发布的包仅包含了其中几项：

|-dist
|-lib
|-package.json
|-...

npm会发布全部的文件，除了.gitignore所忽略的文件。也可使用.npmignore来覆盖.gitignore配置的忽略。不过，有一种更便捷的方式，就是在package.json中设置你要发布的文件或路径：

{
    "files": [
       "dist",
    "lib"
  ],
}

如上配置，就只有dist和lib目录会被发布出去，不过，有些文件是npm不会忽略的，有些文件是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

3.使用babel cli

如今，拜babel的强大功能，前端愈来愈多的使用更方便、更强大的语法，如ES六、ES七、jsx等，来编写代码。在发布代码前，咱们必需要考虑到用户的使用环境，他们可能不使用这些语法进行开发，那么，最好的作法就是把全部源代码转译成兼容的ES5代码。仔细看上面的目录，会发现发布的组件并非咱们的源代码/src，而是编译到/lib和/dist的js文件。

首先，要先安装babel cli，安装好后就可使用babel命令编译

npm install --save-dev babel-cli

第二步，配置.babelrc文件，把你须要的babel插件添加进去。若是你使用webpack，就能够把babel-loader的配置项项目复制到这个配置文件，如下是我一个React项目的配置：

{
  "presets": [
    "es2015",
    "stage-2",
    "react"
  ],
  plugins: ['transform-decorators-legacy'],
}

其中plugins配置的是ES7装饰者（非必需）。接下来，在package.json中配置脚原本运行babel：

"scripts": {
  "clean": "rd /s/q lib && mkdir lib",
  "lib": "npm run clean && babel src --out-dir lib 
},

这里，先清空lib目录，而后将/src的源文件，用babel转译至/lib目录下，/lib就是咱们要发布的目录，在DOS中键入npm run lib就能看到效果了。固然，脚本的具体配置因项目而异。

4.发布

至此，为项目取个不重复的响亮名字，在DOS项目目录下输入npm publish就能发布你的组件了。每次发布时，须要注意更新版本号:

通常来说大部分的软件版本号分3段，好比 A.B.C

• A 表示大版本号，通常当软件总体重写，或出现不向后兼容的改变时，增长A，A为零时表示软件还在开发阶段。

• B 表示功能更新，出现新功能时增长B

• C 表示小修改，如修复bug，只要有修改就增长C

为了让更多人了解发布的包，务必加上精炼的README文档，中、英文最好。

5.组件质量认证

一个包可以被用户采用，除了功能知足需求，稳定的版本、充分的测试、准确地文档、合适的样例、npm下载量等等，均可能是用户的考察项。另外，最好将你的项目开源到github上，github可以自动链接CI服务，在线上测试你的代码，并提供诸如代码覆盖率报告等服务，并把这些信息用小标签的形式展示出来，来给包的质量背书。下面是antd的小标签：

若是对如何得到这些标签感兴趣，能够关注我以后的文章(ง •̀_•́)ง。

写在最后

中国互谅网行业的快速发展全世界有目共睹，但愿在开源生态里，能看到愈来愈多的中国名字。

★★react-freecolor★★是我开发一个react组件，没开发完，但目录结构和项目配置基本成型，有兴趣的能够看看。

参考

• understand npm

• 软件的版本号是如何肯定的？

• shields.i

• 4bin's Blog