如何打造自己的npm库

栏目: 编程工具 · 发布时间: 6年前

内容简介:首先去github新建一个仓库,然后clone到本地,我们的主要工作环境就在这里啦~然后去npm注册一个账号。传送门注册好之后我们输入npm login进行登录操作,一定要记得在之前验证邮箱,否则后面无法发布。

首先去github新建一个仓库,然后clone到本地,我们的主要工作环境就在这里啦~

如何打造自己的npm库

然后去npm注册一个账号。传送门

注册好之后我们输入npm login进行登录操作,一定要记得在之前验证邮箱,否则后面无法发布。

这里是我们的源代码,与之前不同的是,我们需要做一些处理。

如何打造自己的npm库
(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文件夹中。这时我们的文件夹中是这样的结构

如何打造自己的npm库

收尾工作

对了,我们还需要编写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库》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Beginning XSLT 2.0

Beginning XSLT 2.0

Jeni Tennison / Apress / 2005-07-22 / USD 49.99

This is an updated revision of Tennison's "Beginning XSLT", updated for the new revision of the XSLT standard. XSLT is a technology used to transform an XML document with one structure into another ......一起来看看 《Beginning XSLT 2.0》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

MD5 加密
MD5 加密

MD5 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具