之前在和小伙伴做一些项目学习的时候经常会写一些重复的代码,然后复制粘贴到下一个项目中使用,比如之前写了 localStorage、sessionStorage等 API 的函数封装实现。假设项目需要使用这些封装好的 API 就要自己再复制粘贴一份,假设如果发现其中有可改进或者修改的地方,那么就需要自己再将这些修改后的文件覆盖到每一个使用过的项目中。
这样的方式实在是太费时费力了,还不好管理。后来就想着经常使用的 npm package 是不是也可以将自己封装好包的也放在上面进行管理呢?而且还有版本号可以选择不同的版本,也解决了需要使用不同实现方式版本的问题,如果有修复更新还可以同步……
优点很多我就不一一描述场景了。
缺点?也有。如果考虑面向大众,那么就要开始长期维护代码。如果不考虑只是自己使用(也不在公司项目中使用)那么就没什么缺点。
好的,废话不多说了,下面就开始介绍流程。
如果要使用 npm publish package 的服务就需要先拥有一个 npmjs 账号。
这个简单,也不多说了,只要记得账号密码就行。
首先建立一个文件夹用于存放包项目,
进入该文件夹,npm 命令以当前路径为基准
初始化改文件夹,即 npm package 配置
npm init // 初始化 npm 配置
// 过程是以问答式 CLI 方式进行
// Q1:package name: (文件夹名字) | 默认会以文件夹名字命名,当然也可以自定义包名,但需要遵守 npm 命名规范
// Q2:version: (1.0.0) | 版本号,默认是 1.0.0,具体版本号规则,可参考《语义化版本 2.0.0》
// Q3:description: | 包描述,用于描述这个包的主要功能以及用途
// Q4:entry point: (index.js) | 入口文件,即从那个文件开始执行
// Q5:test command: | 测试命令,用于包测试的命令,可以后续补充关于测试包的编写
// Q6:git repository: | 项目的 git 存储库地址
// Q7:keywords: | 描述包的关键字,用于在 npmjs 上查询关键字
// Q8:author: | 作者名字,可以使用 npmjs 名称、npmjs 注册邮箱、github 注册邮箱
// Q9:license: (ISC) | 开源协议,默认 ISC
// Q10:输出 package.js 内容并询问 Is this OK? (yes) 默认为 yes,回车后生成文件
至此,初始化 npm 配置步骤完成,但是并非为最终 package.js 文件内容。
我在参考了一些开源项目的源码以及 npm module 里的信息后发现至少需要三个文件夹:dist | src | types
在开发阶段 package.js 中的 main 配置是指向包的执行文件(index.js)。而我在开源项目的源码以及 npm module 里发现 main 的配置并非指向 src/index.js 而是指向 dist/index.js。
如果要将包变得与众多开源 npm module 一样的话,那么就需要对 package.js 进行改造了。
package.js 中需要更改/添加以下配置信息
如果需要进行测试运行代码的话就需要编写代码通过配置 test command 来进行代码的运行和测试了。
目前我看到的使用模块化标准的主要分为2个流派,一个是 ES6 一个是 TypeScript。构建使用的模块化打包工具中 rollup 是使用最多的,一部分使用了 gulp。
这里我也是选择了使用 TypeScript 来进行编写,所以会以 TypeScript + rollup 为例。
Rollup 的 options
{
input: { // 输入配置
input: resolve('src/index.js'),
plugins: [] // 使用的插件列表
},
output: { // 输出配置
file: resolve('dist/web-storage.js'), // 构建文件生成路径
format: 'umd', // 构建模块标准
name: 'WebStorage', // 导出命名
env: 'development' || 'production', // 根据控制台命令环境判断,如无需则不写
transpile: false || true, // 透明的?目前没看到文档解释 <- X | 自定义字段,用于判断是否需要 buble 插件参与编译构建
}
}
Rollup 使用了 Promise 封装了调用流程,后续操作都很方便的通过 then 的回调函数进行处理。
rollup
.rollup(input) // 输入配置 input
.then(bundle => bundle.generate(output)) // 输出配置 output,通过 generate 函数来生成源码的规格:cjs es min 等
.then(bundle => { console.dir(bundle) }) // generate 函数生成的源码字符串结果
在拿到生成的源码字符串后使用 nodejs 的 fs.writeFile 函数来进行写入生成文件。
要将包发布先要登录 npm
npm login // 登录命令
Username: // 输入注册时候的用户名
Password: // 密码
Email: (this IS public) // 注册时的邮箱
登录完成后即可使用 publish 将 package 上传至 npm 了。
npm publish // publish 时会以 package.js 里 name 属性为包名
// 稍等一段时间,就可以通过 install 进行安装使用了。
npm i 包名
如果包有更新代码,那么需要更新版本号,否则无法进行发布。
// 需要先登录
npm unpublish 包名 // 即可将 npm 上的包删除
error: cannot be republished until 24 hours have passed.
删除已在 npm 发布的同名包,需要在24小时后才能重新发布
以上就是在从开发到配置再到发布的一系列流程了,其实在刚入手尝试的过程中还是踩了不少的坑,比如把一些不再维护的包和可替换的包都整理出来了。这个过程中使用了 TypeScript 来实现,也算是实战了一把,不过代码还是有可优化的地方。
目前也在不断的学习以及使用 TypeScript,难度倒是不算太大,主要还是习惯和熟练度的问题以及设计/解决思路的问题。
我自己封装好的 Web Storage API 已经发布到 npm publish 上了。
npm 包名:cat-web-storage
npm:https://www.npmjs.com/package/cat-web-storage
github:https://github.com/linxsbox/cat-web-storage
版权声明:
本文版权属于作者 林小帅,未经授权不得转载及二次修改。
转载或合作请在后台留言及联系方式。