node.js 现已支撑了 esm 的形式，写 esm 需求开端大于 commonjs 的需求。但问题一些库对 esm 支撑相对较慢。下面盘点：eslint 和 jest 中运用 esm 遇到的问题。

package.json 装备 type 选项

{
  "name": "debugger-source-code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {}
}

告知这个项目运用 esm 的方法来处理。

eslint 支撑 esm 装备

eslint 支撑 esm 有两种方法：

  • 环境变量运用浏览器环境，支撑高阶的 ECMAScript 的语法。
  • 运用处在实验性的 eslint.config.js 文件输出 esm 装备文件。
npm init @eslint/config # 运用指令初始化 eslint 的装备

eslint 指令运用问答的方法生成一个装备文件。我们挑选的时分依照浏览器 esm 的选项进行挑选，得到的一个 .eslintrc.cjs：

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
    }
}

留意 后缀时 .cjs 的内容, 输出的是一个 commonjs 的模块的装备文件，在现有的版本中是不支撑的 esm 的装备文件，假如装备文件被编辑器报了非 esm 错误，能够将装备文件添加到 .eslintignore 文件中，或者运用其他类型文件装备项目。

运用 eslint.config.js

eslint 在新的版本中，实验性开端支撑 eslint.config.js 文件，此文件需求输出一个 esm 的模块，这儿不讲配， 一个简略的装备如下：

export default [
    {
        rules: {
            semi: "error",
            "prefer-const": "error"
        }
    }
]

jest 中运用 esm

当然这儿不考虑扩展 js 语法到 JSX/TSX 等其他拓宽文件，原生运用 esm 的语法

npm install jest

假如只是一般的 JS esm 语法其实不用装备 Jest， 可是需求启动 Jest 的时分添加 Node.js 的属性支撑

"scripts": {
    "test": "NODE_OPTIONS=--experimental-vm-modules jest"
}

运用 jsx 语法 esm 支撑

这儿我们还是运用 babel, 运用 babel 的流程如下：

  • 装置 babel 以及其它依靠包： babel-jest、@bable/core、@babel/preset-env、@babel/preset-react
  • 装备 babel 装备装备文件；
module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]， '@babel/preset-react'],
};

修改 jest 的转换器：

export default {
  transform: {
    '\\.[jt]s?$': 'babel-jest' // babel-jest 来转换
  },
};

小结

  • eslint 支撑 esm 中遇到的问题以及解决方法
  • jest 中运用 esm 的两种方法

参阅

  • ESLint Config file
  • Eslint new Config
  • Jest transform