教程 如何打造自己的 npm 库

rozwel · 发布于 2018年01月05日 · 最后由 rozwel 回复于 2018年01月05日 · 190 次阅读
B4750a
本帖已被设为精华帖!

如何打造自己的npm库

背景

今天领导出差,也没太多事情做,所以在自己自学比较薄弱的正则表达式环节,查了一些资料,突发奇想如果自己能有一个维护了的库,把常用正则放在里面,封装一下,以后不管是项目中使用还是自己没事写一写demo都是事半功倍的。

准备工作

node与npm肯定是要有的,这些略过不谈-v-

操作流程

代码规范

首先去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我的个人博客我提交的正则库

希望这篇文章可以给大家提供有用的东西~

共收到 2 条回复
1f59ef

恩,博客不错。😼 😼 😼

B4750a

感谢大大支持~😋

1f59ef es6china 将本帖设为了精华贴 01月09日 09:29
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册