Jest项目实战（5）：发布代码到 npm
上一节我们已经将代码成功托管到了 GitHub，但为了让其他开发者能够更方便地使用我们的工具库，接下来我们需要将它发布到 npm。npm 不仅是前端领域最著名的包托管平台，而且提供了便捷的代码检索和安装功能。以下是将 jstoolpack 发布到 npm 的详细步骤。
1. 打包代码
为了确保其他开发者能够以最优化的形式使用我们的库，我们首先需要对代码进行打包。这里我们选择使用 Rollup，一个轻量级的模块打包器，非常适合打包 JavaScript 库。
安装依赖
npm install --save-dev rollup rollup-plugin-typescript2 rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-terser
配置 Rollup
在项目根目录下创建 rollup.config.js 文件，配置如下：
import typescript from "rollup-plugin-typescript2";
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import { terser } from "rollup-plugin-terser";// 配置选项数组
const outputConfigs = [{// 打包为 commonjs 模块file: "dist/index.common.js", // 类似于 webpack 的 outputformat: "cjs", // 打包为 commonjs 模块exports: "default"
},{// 打包为 ESM 模块file: "dist/index.esm.js", // 类似于 webpack 的 outputformat: "es", // 打包为 ESM 模块exports: "named"
},{// 打包为 umd 模块，方便在浏览器里面使用file: "dist/index.js",format: "umd",name: "jstp",exports: "default",
}];export default outputConfigs.map(config=>({input: "src/index.ts", // 入口文件，类似于 webpack 的 inputoutput : {...config},plugins: [typescript(),resolve(),commonjs(),terser(),],
}));
创建入口文件
在 src 目录下创建 index.ts 文件，内容如下：
import { range } from "./array";
import { debounce } from "./function";
import { truncate } from "./string";export default {range,debounce,truncate,
};
配置 TypeScript
确保 tsconfig.json 中有以下配置：
{"compilerOptions": {"target": "ESNext","module": "ESNext","strict": true,"esModuleInterop": true,"skipLibCheck": true,"forceConsistentCasingInFileNames": true,"outDir": "./dist","rootDir": "./src"}
}
2. 发布前的准备
配置 .npmignore 或 package.json
为了确保只有必要的文件被发布到 npm，往 npm 发布代表的时候，应该只发布打包后的代码，这里有两种方式：
- 黑名单
- 白名单
黑名单方式类似于 .gitignore 的方式，创建一个.npmignore，回头记录在这个文件里面的目录或者文件就不会被发布到 npm 上面
# .npmignore
src
tests
但是使用黑名单的方式有一个问题就是在项目中当我们新增了一些文件或者目录的时候，.npmignore 也需要做出相应的修改。有些时候会忘记修改 .npmignore 文件，导致一些不必要的文件或者目录被发布到 npm 上面去。
更加推荐的是白名单方式，在 package.json 文件中添加 files 字段，只有 files 字段里面的文件或者目录才会被发布到 npm 上面去。
{"files": ["dist","LICENSE"]
}
白名单配置完成后，我们还需要做两件事情：
- 包的说明信息
- 包的名字
- 包的版本
- 包的描述
- 包的作者
- 包的入口文件
确保 package.json 中包含以下信息：
{"name": "jstoolpack","version": "1.0.0","description": "This is a JavaScript function library, primarily aimed at learning and communication.","main": "dist/index.common.js","module": "dist/index.esm.js","browser": "dist/index.js","author": "Your Name <your.email@example.com>","license": "MIT","files": ["/dist","LICENSE"],"repository": {"type": "git","url": "git+https://github.com/yourusername/jstoolpack.git"}
}
3. 进行发布
确保镜像源正确
npm config get registry
如果镜像源不是 https://registry.npmjs.org/，可以通过以下命令切换：
npm config set registry=https://registry.npmjs.org
登录 npm
确保你已经在 npm 上注册了账号并验证了邮箱。然后在终端中执行以下命令进行登录：
npm login
按照提示输入用户名、密码和邮箱。
发布代码
确保所有更改都已经提交并且工作区是干净的，然后执行以下命令进行发布：
npm publish
如果一切顺利，你会看到类似以下的输出：
+ jstoolpack@1.0.0
至此，jstoolpack 已经成功发布到 npm 上。其他开发者可以通过以下命令轻松安装和使用你的库：
npm install jstoolpack
总结
通过以上步骤，我们不仅将代码托管到了 GitHub，还成功发布了到 npm，使得其他开发者可以更方便地使用我们的工具库。这不仅提高了项目的可见性和可用性，也为社区做出了贡献。