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 有两种方法:
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