当前位置: 首页>前端>正文

构建NPM容器 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代码,一起完善我们的代码~

结语

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


https://www.xamrdz.com/web/2kr1926589.html

相关文章: