Node.js 项目使用 NodeNext 配置 Typescript 的方法

作者：科技微讯

日期：2022-12-09

📝 笔记

在 Node.js 中配置 Typescript，.tsconfig.json 通常设置为 "module": "CommonJS"，这篇文章分享如果设置为 "module": "NodeNext" 需要怎么做，有哪些注意事项。

初始化项目，创建 package.json 文件：npm init -y；
在 package.json 添加 "type": "module"，即默认使用 ESM 而不是 CommonJS 模块方案；
安装 typescript：npm i -D typescript；
安装 Node.js 的 type：npm i -D @types/node；
在 package.json 增加一个 npm script："build": "tsc"；
按照惯例，把所有 ts 文件放在 ./scr 文件夹，转换后的 js 文件放在 ./dist 文件夹，所以需要分别创建这两个文件夹；
复制下方代码创建一个 tsconfig.json 文件，其中 "module": "NodeNext" 可改为 "module": "Node16"，因为 Node 16 是第一个完全支持 ESM 的 LTS 版本，注意区分 "module": "NodeNext" 和 "module": "ESNext"，NodeNext 允许同时使用 CommonJS 和 ESM 两套方案，只要把文件后缀改为 .cts 或 .mts 即可，或按照上面第二个步骤在 package.json 添加 "type": "module"，这样 .ts 默认就是 ESM，否则是 CommonJS，而 ESNext 就只是 ESM；

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "target": "ES2020",
    "sourceMap": true,
    "outDir": "dist",
    "strict": true
  },
  "include": ["src/**/*"]
}

经过以上设置后，在代码中使用 import 而不是 require() 引入一个模块，本地模块需要添加文件后缀，例如 .js、.cjs，注意不是 .ts 和 .cts：

//这是一个模块 helper.ts
export const name = "科技微讯";

//在 index.ts 引入 helper.ts 模块，需要添加 .js 后缀
import { name } from "./helper.js";

以上是 ESM 的用法，"module": "NodeNext" 允许同时在项目中使用 CommonJS，但要使用 .cts 后缀：

//这是一个模块 helper.cts
module.exports.name2 = "科技微讯";

同时引入 ESM 和 CommonJS 模块，一律用 import：

import { name } from "./helper.js";
import myName from "./helper.cjs";
console.log(name); //科技微讯
console.log(myName); //{name2: "科技微讯"}

虽然 Node.js 12 开始就开始逐步支持 ESM，Node.js 16 已经正式支持，但 ESM 其实并没有普及，至少国内的云函数服务都不支持用 ESM 作为 handler 入口函数，这意味着国内的云函数都无法运行纯 ESM 代码。