准备工作
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 我的个人博客我提交的正则库
希望这篇文章可以给大家提供有用的东西~
来源: https://juejin.im/post/5a9911b9f265da23793b9881