Javascript 那末盛行，作为一个前端开辟者，或许前端入门者，宣布一个正式可用的 Javascript 模块，关于本身来讲应当生长很大。下面就以一个简朴的 Javascript 模块 filesize.js 来引见 github、travis-ci、npm 这些内容的组合运用。
一、目的概览
本文将运用 filesize.js 这个作为引见，这个是一个异常简朴的 js 库，统共代码也不到 20 行，然则功用完美，可以临盆运用。事实上 npm 上有不少简朴到几行代码搞定的模块。
起首宣布一个 js 模块，一定须要时代码开源，所以必需运用到 Github 作为代码治理。宣布到 npm 能不能不开源呢，固然可以，但npm install 获得以后就是你的源码。
宣布一个 js 模块，须要让他人运用，优越的测试必不可少（许多项目有下图的绿色小图标），所以须要给你的项目写完美的测试用例（testcase），然后应用 Github 上第三方的 ci 东西来实行，travis-ci 就是个中一个用的比较多的。
代码测试终了，没有任何问题以后，可以 npm 宣布模块了。
我们 filesize.js 到达的效果就是如许的：
而且可以直接 npm install filesize.js 装置下载。下面离别引见申明。
二、Github 项目初始化
起首在 Github 上建立项目，注重想好项目的名字，名字最好可以和以后 npm 宣布的模块名字雷同（npm 模块名字不能和其他人已宣布的名字反复）。背面关于 Github 假如提交代码这些请自行找其他文章进修。
须要强调的是：
注重完美的 README.md 文档，可以文档先行，如许可以在写代码之前想好你这个模块的 API 要领等。
可以尝试先写 testcase（测试先行），固然不强迫，提早写 case，没法运转测试实在也挺耗时的。
注重整顿代码构造，关于 js 模块代码，平常是:
package.json 是 npm 模块相干的设置；
glupfile.js 是 glup 的设置文件，我这里主要用来紧缩代码；
README.md 文档申明；
.gitignore 疏忽 git 版本治理的文件和目次（一些可有可无的悉数不要上传 git）；
.travis.yml travis-ci设置文件，背面会说。
三、Javascript 模块 & npm
关于一个 js 模块，都有 package.json 文件，这个是一个严格请求的 json 花样，任何不符合请求的都邑在实行 npm 敕令的时刻报错。比方 filesize.js 的该文件内容以下：
这个中比较主要的就是 name/officialName、keywords、devDependencies、dependencies、scripts、main、version；
name：npm 宣布以后的名字，平常和前述 github 项目名字保持一致，且不能和已有的 npm 模块重名；
keywords：npm 模块的关键字，用于在 npmjs.com 上检索；
devDependencies：开辟依靠，比方会用到 glup 紧缩殽杂，tape 举行单元测试，jshint 举行静态代码搜检；这些都是开辟过程当中须要的依靠，非开辟环境可以不必装置；
dependencies：模块的依靠库，用户在运用你的这个模块的时刻，也会附带举行装置下载；filesize.js模块很简朴，并没有任何依靠。
scripts：设置一些指令，比方：
npm run lint，npm run test，npm run build：离别是代码搜检，实行测试用例，build 紧缩库main：这个是 package.json 中异常主要的设置，标志援用这个模块的进口在那里；
version：模块的版本，每次宣布的时刻，比方保证版本不一样。
除了这些设置，package.json 另有其他的更多设置，人人可以去搜刮进修一下，平常有了这些设置项，就够了，就可以举行 npm publish 来宣布模块。
然则，我们宣布之前，须要做一些延续集成和单元测试，用来保证代码的正确性，稳定性。这个就是运用到 travis-ci 了。
四、接入 travis-ci 延续集成
延续集成是什么？简朴来讲就是尽快，尽量早的举行代码的正确性考证（也就是测试），那末我们每次在 github push代码的时刻就运转一下测试用例，这个是否是很快，很早，也就是延续集成，关于一些简朴的 js 模块，我们做一些简朴的单元测试就够够的了。
在 github 建立项目以后，可以翻开 https://travis-ci.org/，并运用 Github 受权上岸，然后本身的 Account 菜单中勾上须要接入 travis-ci 的项目，以下图所示：
假如看不到新建立的项目，可以右上角革新一下。开启以后，travis-ci 会 hook 住你 git push 敕令，然后依据你项目中的 .travis.yml 设置文件来实行 npm test（npm run test 的简写）举行测试，并捕捉检测效果来推断 测试用例 实行胜利与否。比方 filesize.js的 .travis.yml 设置以下所示：
示意实行在 nodejs 环境，两个差别的大版本离别实行以下，平常挑选 4.x 版本即可。那末每次 push 代码以后，都邑举行自动触发 ci 使命，以下图所示：
然后你就可以把这个小绿色图表放到你的 README.md 文件中了。
五、宣布 publish
项目建立了，package.json 设置好了，代码写完了，文档完美了，ci 实行没有错误了，那末就可以宣布出去了。怎样宣布，异常简朴，假如你没有 https://www.npmjs.com/ 的账号，注册一个就好了，和平常的网站注册并没有什么区别。
有了账号以后，在项目代码根目次，实行：
npm publish控制台会请求你输入 npmjs 网站的邮箱和暗码，输入即可，然后等着涌现 宣布胜利即可，平常涌现：filesize.js@1.0.1 如许花样的字符串即可，然后去 npmjs 网站刷一下碰运气。
六、其他
假如你做了一个很好用的有创意的模块，可以给你的模块做一个简朴炫酷的主页来显现用法和 API 接口吧。本文中作为示例的项目 filesize.js 是一个超等大轮子，就是为了写这篇文章而做了，固然也可以用户开辟天生环境。
末了安利一下，我的 Github 主页：https://github.com/hustcc，ID是 hustcc，由于我是一个huster，恰好之前注册了hust.cc域名，所以有了这个 github id 。
有哪些轮子：
莆田系浏览器插件: Chrome浏览器插件——翻开莆田系病院网站，发出正告提示、显现病院信息（莆田系哪一波潮的时刻做的，用户量还挺多的）。
timeago.js: timeago.js is a tiny(~1.7kb) library used to format date with
*** time agostatement. eg: ‘3 hours ago’. No dependency & localization & tiny.echarts-for-react: baidu Echarts(v3.0) components for React wrapper. 一个简朴的echarts(v3.0)的react封装。
我是一个背景开辟者，最近在入门前段开辟，深度Github、轮子爱好者。
