怎么开发并发布一个可用的 JavaScript 模块 ？

Javascript 那么流行，做为一个前端开发者，或者前端入门者，发布一个正式可用的 Javascript 模块，对于本身来讲应该成长很大。下面就以一个简单的 Javascript 模块 filesize.js 来介绍 github、travis-ci、npm 这些内容的组合使用。

1、目标概览

本文将使用 filesize.js 这个做为介绍，这个是一个很是简单的 js 库，总共代码也不到 20 行，可是功能完善，能够生产使用。事实上 npm 上有很多简单到几行代码搞定的模块。

1. 首先发布一个 js 模块，确定须要时代码开源，因此必须使用到 Github 做为代码管理。发布到 npm 能不能不开源呢，固然能够，但npm install 获得以后就是你的源码。
2. 发布一个 js 模块，须要让别人使用，良好的测试必不可少（不少项目有下图的绿色小图标），因此须要给你的项目写完善的测试用例（testcase），而后利用 Github 上第三方的 ci 工具来执行，travis-ci 就是其中一个用的比较多的。
3. 代码测试完毕，没有任何问题以后，能够 npm 发布模块了。

咱们 filesize.js 达到的效果就是这样的：

而且能够直接 npm install filesize.js 安装下载。下面分别介绍说明。

2、Github 项目初始化

首先在 Github 上建立项目，注意想好项目的名字，名字最好可以和以后 npm 发布的模块名字相同（npm 模块名字不能和其余人已经发布的名字重复）。后面关于 Github 若是提交代码这些请自行找其余文章学习。

须要强调的是：

1. 注意完善的 README.md 文档，能够文档先行，这样能够在写代码以前想好你这个模块的 API 方法等。

2. 能够尝试先写 testcase（测试先行），固然不强制，提早写 case，没法运行测试其实也挺耗时的。

3. 注意整理代码结构，对于 js 模块代码，通常是:

• package.json 是 npm 模块相关的配置；
• glupfile.js 是 glup 的配置文件，我这里主要用来压缩代码；
• README.md 文档说明；
• .gitignore 忽略 git 版本管理的文件和目录（一些可有可无的所有不要上传 git）；
• .travis.yml travis-ci配置文件，后面会说。

3、Javascript 模块 & npm

对于一个 js 模块，都有 package.json 文件，这个是一个严格要求的 json 格式，任何不符合要求的都会在执行 npm 命令的时候报错。好比 filesize.js 的该文件内容以下：

这其中比较重要的就是 name/officialName、keywords、devDependencies、dependencies、scripts、main、version；

1. name：npm 发布以后的名字，通常和前述 github 项目名字保持一致，且不能和已有的 npm 模块重名；
2. keywords：npm 模块的关键字，用于在 npmjs.com 上检索；
3. devDependencies：开发依赖，好比会用到 glup 压缩混淆，tape 进行单元测试，jshint 进行静态代码检查；这些都是开发过程当中须要的依赖，非开发环境能够不用安装；
4. dependencies：模块的依赖库，用户在使用你的这个模块的时候，也会附带进行安装下载；filesize.js模块很简单，并无任何依赖。
5. scripts：配置一些指令，好比：npm run lint，npm run test，npm run build：分别是代码检查，执行测试用例，build 压缩库
6. main：这个是 package.json 中很是重要的配置，标志引用这个模块的入口在哪里；
7. version：模块的版本，每次发布的时候，好比保证版本不同。

除了这些配置，package.json 还有其余的更多配置，你们能够去搜索学习一下，通常有了这些配置项，就够了，就能够进行 npm publish 来发布模块。

可是，咱们发布以前，须要作一些持续集成和单元测试，用来保证代码的正确性，稳定性。这个就是使用到 travis-ci 了。

4、接入 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 文件中了。

5、发布 publish

项目建立了，package.json 配置好了，代码写完了，文档完善了，ci 执行没有错误了，那么就能够发布出去了。怎么发布，很是简单，若是你没有 https://www.npmjs.com/ 的帐号，注册一个就行了，和通常的网站注册并无什么区别。

有了帐号以后，在项目代码根目录，执行：

npm publish

控制台会要求你输入 npmjs 网站的邮箱和密码，输入便可，而后等着出现 发布成功便可，通常出现：filesize.js@1.0.1 这样格式的字符串便可，而后去 npmjs 网站刷一下试试看。

6、其余

若是你作了一个很好用的有创意的模块，能够给你的模块作一个简单炫酷的主页来显示用法和 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 ago statement. eg: '3 hours ago'. No dependency & localization & tiny.
• echarts-for-react: baidu Echarts(v3.0) components for React wrapper. 一个简单的echarts(v3.0)的react封装。

我是一个后台开发者，最近在入门前段开发，深度Github、轮子爱好者。