推荐点击下方 阅读原文 使用语雀查看
本文使用简单的 TS(指 TypeScript),讲解了 NPM 包的发布流程,包括代码格式化、lint、单元测试等。主要参考这篇文章,这是对应的仓库。
为什么要用 TS
- 更健壮的代码以及更易维护。
- 使用这个包的人,可以使用 ts 或 js。但如果你只用 js 写的话,当你的包变流行之后,ts 使用者就需要类型定义,这时再加的话,就耗时间、易出错还难更新。
- 当你在代码文件中写了类型定义,使用者就不需要单独去下载
@types/xxx
类型定义了。 - 强类型定义也算是一种文档的自我描述,使代码易读。
- 即使使用者不用 ts,但一些编辑器也会根据类型定义给你更好的代码提示。
开始项目
#
{ "compilerOptions": { "target": "es5", // 编译目标代码为 es5 的,为了兼容更多的浏览器 "module": "commonjs", // 使用 cjs 模块解析机制 "declaration": true, // 当打包时,生成类型定义文件 "outDir": "./lib", // 打包的地址为 ./lib "strict": true }, "include": ["src"], "exclude": ["node_modules", "**/「tests」/*"] // 不编译 node_modules 和 「tests」 文件夹,因为他们只在开发时使用 }
# 编写代码
mkdir src && touch src/index.ts
代码内容如下:
export
添加 build 命令以及运行:
这时就能看到生成的 lib 文件夹以及 .d.ts 声明文件了。
这时,应该把 lib 文件夹也忽略掉。
lib 前的反斜线代表只忽略根路径下的 lib,如果其他子文件夹有 lib 是不会忽略的,而 node_modules 就是不管在哪里都会被忽略。
添加格式化和 lint
@typescript-eslint/parser
添加配置文件:
// .eslintrc.js
再添加格式化命令
"format":
这时可以运行一下
npm run lint
npm run format
当我们把包上传到 npm 仓库时,肯定只希望上传打包后的文件,而不是源代码,可以通过两种方式来实现,分别是编写 .npmignore
文件,和使用 package.json
中的 files 字段,后者更好一些,因为前者要写的东西可能会有很多。package.json
中的 files 可以这样写:
"files": [
现在就只有 lib 文件夹下的才会上传到 npm 仓库啦,README.md 和 package.json 已经默认加入了。
增加测试:
npm install --save-dev jest @types/jest ts-jest
编写配置文件 jest.config.js
如下
module.exports = {
增加 test 命令
"test":
增加测试文件 src/__test__/Greeter.test.ts
如下
import { Greeter }
执行 test 命令查看
这里可以下载 vscode jest 插件,进行测试用例的实时结果查看
使用 npm 特殊命令:
对于一个优秀的包,我们应该将操作尽可能的自动化,接下来看几个特殊的命令:
命令 | 操作 | 备注 |
---|---|---|
prepare | npm run build | 在打包和发布之前运行,适合build |
prepublishOnly | npm test && npm run lint | 在 prepare 之前,并且只有 npm publish 时才运行,这里应该执行测试和lint,保证我们不会发布不好的代码 |
preversion | npm run lint | 在新建 tag 之前运行 |
version | npm run format && git add -A src | 在改了 tag 之后,但 commit 之前 |
postversion | git push && git push --tags | 在改了 tag 之后,commit 之后 |
最后如下,再添加上 main 和 types 字段
登陆你的 npm 账号,执行 npm publish 命令,注意要使用 npm 默认源哦
这样就发布成功了,也执行了 prepare 和 prepublishOnly 命令,下面使用 npm version patch 升级个版本看一下:
也看到如预期执行了命令,最后再 npm publish 一下,就能更新版本了。
最后使用包如下:
结语
学到了给 ts 写 lint 配置、jest 简单 ts 配置、npm 的特殊命令,是一个比较规范的包发布流程。
欢迎关注我的公众号,或语雀 https://www.yuque.com/zcue/blog :