验证码: 看不清楚,换一张 查询 注册会员,免验证
  • {{ basic.site_slogan }}
  • 打开微信扫一扫,
    您还可以在这里找到我们哟

    关注我们

ESLint和Jest中怎么使用esm

阅读:239 来源:乙速云 作者:代码code

ESLint和Jest中怎么使用esm

      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 来转换
        },
      };
    分享到:
    *特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: hlamps#outlook.com (#换成@)。
    相关文章
    {{ v.title }}
    {{ v.description||(cleanHtml(v.content)).substr(0,100)+'···' }}
    你可能感兴趣
    推荐阅读 更多>