logo科技微讯

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 代码。


相关笔记:

donation赞赏
thumbsup0
thumbsdown0
暂无评论