ESLint和Jest中怎么使用esm

本篇內(nèi)容介紹了“ESLint和Jest中怎么使用esm”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

package.json 配置 type 選項(xiàng)

node.js 已經(jīng)支持了 esm 的模式，寫 esm 需求開始大于 commonjs 的需求。但問題一些庫(kù)對(duì) esm 支持相對(duì)較慢。下面盤點(diǎn)：eslint 和 jest 中使用 esm 遇到的問題。

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

告訴這個(gè)項(xiàng)目使用 esm 的方式來處理。

eslint 支持 esm 配置

eslint 支持 esm 有兩種方式：

• 環(huán)境變量使用瀏覽器環(huán)境，支持高階的 ECMAScript 的語法。

• 使用處在實(shí)驗(yàn)性的 eslint.config.js 文件輸出 esm 配置文件。

npm init @eslint/config # 使用命令初始化 eslint 的配置

eslint 命令使用問答的方式生成一個(gè)配置文件。我們選擇的時(shí)候按照瀏覽器 esm 的選項(xiàng)進(jìn)行選擇，得到的一個(gè) .eslintrc.cjs：

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

注意 后綴時(shí) .cjs 的內(nèi)容, 輸出的是一個(gè) commonjs 的模塊的配置文件，在現(xiàn)有的版本中是不支持的 esm 的配置文件，如果配置文件被編輯器報(bào)了非 esm 錯(cuò)誤，可以將配置文件添加到 .eslintignore 文件中，或者使用其他類型文件配置項(xiàng)目。

使用 eslint.config.js

eslint 在新的版本中，實(shí)驗(yàn)性開始支持 eslint.config.js 文件，此文件需要輸出一個(gè) esm 的模塊，這里不講配， 一個(gè)簡(jiǎn)單的配置如下：

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

jest 中使用 esm

當(dāng)然這里不考慮擴(kuò)展 js 語法到 JSX/TSX 等其他拓展文件，原生使用 esm 的語法

npm install jest

如果只是普通的 JS esm 語法其實(shí)不用配置 Jest， 但是需要啟動(dòng) Jest 的時(shí)候添加 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 的轉(zhuǎn)換器：

export default {
  transform: {
    '\\.[jt]s?$': 'babel-jest' // babel-jest 來轉(zhuǎn)換
  },
};

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