ESLint和Jest中怎么使用esm

本篇內容介紹了“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 來轉換
  },
};

“ESLint和Jest中怎么使用esm”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！