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

构建NPM容器 npm库搭建

前端2024-04-22 11:20:10

准备工作

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

相关文章：