ESLint和Jest中使用esm示例详解

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

ESLint和Jest中使用esm示例详解

乔治_x   2023-03-23 我要评论

package.json 配置 type 选项

node.js 已经支持了 esm 的模式,写 esm 需求开始大于 commonjs 的需求。但问题一些库对 esm 支持相对较慢。下面盘点:eslint 和 jest 中使用 esm 遇到的问题。

{
  "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 的两种方式

参考

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们