如何打造本身的npm库

准备工做

node与npm确定是要有的，这些略过不谈

操做流程

代码规范

首先去github新建一个仓库，而后clone到本地，咱们的主要工做环境就在这里啦~

而后去npm注册一个帐号。传送门

注册好以后咱们输入npm login进行登陆操做，必定要记得在以前验证邮箱，不然后面没法发布。

这里是咱们的源代码，与以前不一样的是，咱们须要作一些处理。

(function (global, name, factory) {
 "use strict";

    if (typeof exports === 'object' && typeof module !== 'undefined') {
        module.exports = factory();
    } else if (typeof define === 'function' && (define.amd || define.cmd)) {
        define(factory);
    } else {
        global[name] = factory.apply(this);
    }
}(this, "项目名称", function () {
    // 逻辑编写
}));
复制代码

这里的操做主要是用于适配开发环境，简单来讲若是环境支持commonJS规范的话，将咱们的代码以module.exports方式导出，amd和cmd规范也定义了相应导出方式，最后的条件是咱们直接使用script标签方式引入的话，在window对象上定义咱们的代码，就能够直接访问对应项目名称的window成员变量来调用咱们的代码逻辑了~

举例：个人js库最终返回的对象是MyModule，那么项目名称这里咱们写MyModule，引入到环境中就可使用window.MyModule来引用咱们的对象了。

这时咱们npm init一下，会发现和以前相比多了不少选项，咱们按照提示填好就好，以后会生成package.json文件。

代码压缩与混淆

接下来把咱们的文件放到根文件夹中的src目录下，为了方便开发中使用，咱们须要使用打包工具进行压缩混淆，我参考了其余模块的压缩打包方式，因此选用了gulp执行压缩代码的工做。

根目录新建gulpfile.js文件，依次安装 gulp gulp-uglify gulp-rename包，在gulp.js文件中输入如下代码

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

gulp.task('default', function () {
  gulp.src('src/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/'))
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest('dist/'))
});
复制代码

以后输入"gulp"命令，咱们会发现代码被成功打包到了dist文件夹中。这时咱们的文件夹中是这样的结构

收尾工做

对了，咱们还须要编写LISENCE文件，这个我是手动建立的，这个文件是开发者的开源声明，指定了库的适用范围，我选用的是MIT，具体开源声明的范围请参考这里。

Publish time~！

好了，工做都完成了，咱们尝试npm publish一下，若是提示成功说明咱们本身的库已经被提交到npm里了，咱们能够尝试在其余项目中npm install 咱们本身的包，而后尽情使用吧~

踩坑提示

首先是以前说到的，咱们须要验证邮箱，这一步容易遗忘，由于npm官网并不会单独给一个页面提示你验证，而是只在首页有个很窄的通知栏。

而后就是咱们publish以前要查看package.json文件里的main指定的路径，必定要写成dist/xxx.js或者dist/xxx.min.js，不然会报找不到依赖的错误。

最后，咱们若是要更新代码的话，记得在package.json中更新咱们的版本号，若是版本号相同的话会发布失败。

扩展

目前Github已经整合了持续集成服务travis，咱们只须要在项目中添加.travis.yml文件，在下一次push以后，travis就会定时执行npm test来测试你的项目（该项目中，使用mocha进行测试管理），而且会在测试失败的时候通知到你，你也能够把项目当前的状态显示在README.md中，进而很容易知道项目当前状态。

这里要提一下，咱们的代码若是想作得更加完善，第一是写测试用例，使用mocha来完成（由于我没接触过，因此暂时没有写用例，你们不要学我QAQ）。第二点就是要写readme，这个文件是做为文档展现在github仓库首页和npm的代码库展现页的，方便你们的使用和查阅。

最后咱们用git工具把代码提交到仓库一份，方便感兴趣的人提交issue和帮忙fork代码，一块儿完善咱们的代码~

结语

本人的以上经历以及部分代码与引用参考了 发布项目到npm

本人提交的库部分代码参考了15个经常使用的javascript正则表达式

顺便在最后安利一下个人github、个人我的博客、我提交的正则库

但愿这篇文章能够给你们提供有用的东西~