需要怎么配置才能在TypeScript中使用ESM方式引入nodejs的库?

我看到ts代码有:如下的引用:

import * as fs from "fs";
import { promises as fsp } from "fs";

但是我下载repo本地会报错:
QQ_1724773966823.png

fs 应该是nodejs的库,一般我们知道是:require方式进行引入, 但是为何这里使用import引入也可以呢,是需要额外配置哪里才能使用ESM引入吗?

阅读 1k
avatarAI BotBETA

在TypeScript中使用ESM(ECMAScript Modules)方式引入Node.js的库(如fs模块),通常需要在你的项目中做一些配置,以确保TypeScript编译器(tsc)和Node.js运行时都能正确处理ESM。以下是几个步骤和要点来帮助你配置:

1. 确保Node.js版本支持ESM

首先,确保你的Node.js版本支持ESM。从Node.js v12开始,ESM的支持逐步增加,但直到Node.js v14及更高版本,ESM的支持才变得更加完整和稳定。

2. 配置tsconfig.json

在你的tsconfig.json文件中,你需要设置几个关键的编译选项来支持ESM。主要是设置module选项为ESNextES2020(取决于你的具体需求),并确保target选项与你的Node.js版本兼容。同时,你可以设置esModuleInteroptrue来允许默认导入非ESM模块。

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES2018", // 根据你的Node.js版本调整
    "esModuleInterop": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

3. 在package.json中启用ESM

对于Node.js项目,你可以在package.json文件中添加一个"type": "module"字段,这样Node.js就会将.js文件作为ESM来处理。但是,由于你正在使用TypeScript,这主要影响.js文件的直接运行。对于.ts文件,TypeScript编译器的配置(如上所述)更为重要。

{
  "name": "your-project-name",
  "version": "1.0.0",
  "type": "module",
  "main": "dist/index.js",
  "scripts": {
    "build": "tsc"
  },
  "dependencies": {
    // 你的依赖
  },
  "devDependencies": {
    "typescript": "^4.x.x" // 确保是支持ESM的版本
  }
}

4. 编译TypeScript到ESM

使用上述tsconfig.json配置,TypeScript编译器(tsc)将默认编译.ts文件为.js文件,并保留ESM的importexport语句。然后,你可以直接在支持ESM的Node.js环境中运行这些编译后的.js文件。

5. 注意事项

  • 确保你的所有依赖项都支持ESM,或者你已经找到了与你的项目兼容的替代方案。
  • 在某些情况下,你可能需要使用.mjs扩展名来明确指定文件为ESM,但这在TypeScript项目中通常不是必需的。
  • 调试和排错时,注意检查Node.js的错误消息,它们通常会提供关于为什么文件被视为CommonJS模块而不是ESM的线索。

按照这些步骤操作后,你应该能够在TypeScript项目中使用ESM方式引入Node.js的库,包括fs模块。

1 个回答

可以看看报错信息说的是什么?理论上ts是支持这样写的。试试看配置esModuleInteropallowSyntheticDefaultImports
esModuleInterop 属性用于提供对 ES 模块的兼容性支持。当我们在 TypeScript 项目中引入 CommonJS 模块时,可以通过设置 esModuleInterop 为 true 来避免引入时的错误。

{
  "compilerOptions": {
    ...,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

来源是官网的兼容性说明:
https://www.typescriptlang.org/docs/handbook/modules/appendic...
中文版本:
https://ts.nodejs.cn/docs/handbook/modules/appendices/esm-cjs...
事实上这只是编译器对于这种写法的不兼容,如果你用原生的require写法的话就不会这种问题
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Microsoft
子站问答
访问
宣传栏