在现代的前端开发中，使用TypeScript已经成为一种标准。TypeScript不仅提供了静态类型检查，还能让我们使用最新的 ECMAScript 特性，并将其编译为向下兼容的 JavaScript 代码。如果你正在开发一个 NPM 包，并希望支持 CommonJS 和 ESM（ECMAScript 模块）两种标准，那么本文将为你提供一些建议。
创建一个能够同时支持 CommonJS 和 ESM 的 NPM 包并不是一件容易的事情。但是如果你使用 TypeScript 来编写你的代码，那么事情就会变得简单许多。首先，你需要在你的项目根目录下创建一个 `tsconfig.json` 文件，并配置以下选项：
“`json
{
“compilerOptions”: {
“target”: “esnext”,
“module”: “commonjs”,
“strict”: true,
“esModuleInterop”: true,
“skipLibCheck”: true,
“forceConsistentCasingInFileNames”: true,
“moduleResolution”: “node”,
“outDir”: “./lib”
},
“include”: [“src/**/*.ts”],
“exclude”: [“node_modules”]
}
“`
在这个配置中，我们将编译目标设置为 `esnext`，并关闭了 `declaration` 选项，以避免生成不必要的声明文件。接下来，我们需要`esModuleInterop`和 `allowSyntheticDefaultImports` 来确保 TypeScript 理解默认导出。最后，我们将编译的结果输出到 `lib` 目录下。
接着，我们需要安装一些开发依赖：
“`bash
npm install –save-dev typescript ts-node
npm install –save-dev @types/node
“`
然后，我们可以创建一个简单的 NPM 包。首先，创建一个 `src` 目录，并在其中添加一个 `index.ts` 文件：
“`typescript
export function greet(name: string): string {
return `Hello, ${name}!`;
}
“`
接着，我们需要更新 `package.json` 文件，添加以下脚本：
“`json
{
“scripts”: {
“build”: “tsc”,
“prepublishOnly”: “npm run build”
}
}
“`
最后，在 `main` 和 `module` 字段中分别指向我们编译后的 CommonJS 和 ESM 文件：
“`json
{
“main”: “lib/index.js”,
“module”: “lib/index.mjs”
}
“`
现在，你的 NPM 包已经支持了 CommonJS 和 ESM 标准。使用 TypeScript 编写 NPM 包的好处是，它不仅提供了强大的类型检查，还能帮助你轻松地支持不同的模块标准。希望这篇文章对你有所帮助！
了解更多有趣的事情：https://blog.ds3783.com/