🌕 部署与发布

至此，所有的 axios 重构的代码编写和单元测试都完成了。这已经是一个几乎成熟可供使用的 TypeScript 库了。

在目前，并不是所有人都会使用 TypeScript 开发，仍然有大量的 JavaScript 用户，它们是不能直接引用 TypeScript 代码的，因此我们需要先对源码做编译和打包，然后再发布。

如果要将这个包发布到 npm 源，需要注册账号，并且在终端使用 npm login 登录。

# 编译与打包

利用 rollup (opens new window) 来打包

它是一个非常著名的编译打包工具，Vue.js 也是利用 rollup 编译打包的。相比 webpack，它非常适合去编译和打包一些 JS 库。

由于使用 typescript-library-starter 初始化我们的项目，我们已经拥有了 rollup 打包的相关配置和相关插件的安装。

对生成的 rollup.config.ts 做小小的修改：

将 libraryName 修改为项目名称；
input 修改为 src/index.ts 。

input ：表示打包入口文件。

output ：表示输出的目标文件，它是一个对象数组，可以指定输出的格式，比如 umd 格式、 es 模式等。

external ：外部依赖，可以不被打包进去。

watch ：监听文件的变化，重新编译，只有在编译的时候开启 --watch 才生效。

plugins ：

编译过程中使用的插件，其中 rollup-plugin-typescript2 就是用来编译 TypeScript 文件， useTsconfigDeclarationDir 表示使用 tsconfig.json 文件中定义的 declarationDir 。更多插件可以查阅文档。

修改 package.json ，确保一下：

"main": "dist/axios-typescript.umd.js",
"module": "dist/axios-typescript.es5.js",
"typings": "dist/types/axios-typescript.d.ts",

1
2
3

为项目名称。

然后在在控制台执行 npm run build ，会编译输出 dist 目录，其中：

lib 目录是单个 .ts 文件编译后的 .js 文件。
types 目录是所有 .ts 文件编译后生产的 .d.ts 声明文件。
axios.es5.js 是编译后生成的 es 模式的入口文件，用在 package.json 的 module 字段， axios.umd.js 文件是编译后生成的 umd 模式的入口文件，用在 package.json 的 main 字段。

# 自定义部署

由于 semantic-release 插件过于黑盒也略微重量，自己编写自动化部署脚本更加灵活意义更大。

首先修改 package.json ：

需要为这个包命名一个 npm 中没有被占用的名字。可以使用 npm view 搜索包名是否存在。

如果要关联这个发布的包对应的仓库，可以配置 repository 字段。

添加两个 npm scripts ：

{
  "prepub": "npm run test:prod && npm run build",
  "pub": "sh release.sh"
}

1
2
3
4

当运行 npm run pub 的时候，会优先执行 prepub 脚本，在 prepub 中运行了 test:prod 和 build 2 个脚本。 && 符号表示前面一个命令执行成功后才会执行后面的任务。

npm run test:prod 实际上运行了 npm run lint && npm run test -- --no-cache 。先运行 lint 去校验的源码和测试文件是否遵循 tslint 规范，再运行 test 去跑测试。

npm run build 实际上运行了 tsc --module commonjs 、 rollup -c rollup.config.ts 和 typedoc --out docs --target es6 --theme minimal --mode file src 。先运行 tsc 去编译的 TypeScript 文件， dist/lib 和 dist/types 下的文件就是该命令产生的，然后运行 rollup 去构建 axios.umd.js 及 axios.es.js ，最后运行 typedoc 去构建项目的文档。

运行完 prepub 后就会再运行 pub 命令，实际上执行了 sh release.sh 命令。

# 编写部署脚本

创建文件 release.sh ：

#!/usr/bin/env sh
set -e
echo "Enter release version: "
read VERSION
read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r
echo  # (optional) move to a new line
if [[ $REPLY =~ ^[Yy]$ ]]
then
  echo "Releasing $VERSION ..."

  # commit
  git add -A
  git commit -m "[build] $VERSION"
  npm version $VERSION --message "[release] $VERSION"
  git push origin master

  # publish
  npm publish
fi

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#!/usr/bin/env sh 用来表示它是一个 shell 脚本。

set -e 告诉脚本如果执行结果不为 true 则退出。

read VERSION 表示从标准输入读取值，并赋值给 $VERSION 变量。

read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r ，其中 read -p 表示给出提示符，后面接着 Releasing $VERSION - are you sure? (y/n) 提示符； -n 1 表示限定最多可以有 1 个字符可以作为有效读入； -r 表示禁止反斜线的转义功能。因为 read 并没有指定变量名，那么默认这个输入读取值会赋值给 $REPLY 变量。

if [[ $REPLY =~ ^[Yy]$ ]] 表示 shell 脚本中的流程控制语句，判断 $REPLY 是不是大小写的 y ，如果满足，则走到后面的 then 逻辑。

git add -A 表示把代码所有变化提交到暂存区。

git commit -m "[build] $VERSION" 表示提交代码，提交注释是 [build] $VERSION 。

npm version $VERSION --message "[release] $VERSION" 是修改 package.json 中的 version 字段到 $VERSION ，并且提交一条修改记录，提交注释是 [release] $VERSION 。

git push origin master 是把代码发布到主干分支。

npm publish 是把仓库发布到 npm 上，我们会把 dist 目录下的代码都发布到 npm 上，因为我们在 package.json 中配置的是 files 是 ["dist"]

编辑

📢 上次更新: 2022/09/02, 10:18:16

← 🌖 更多模块单元测试