温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

ESLint和Jest中怎么使用esm

发布时间:2023-03-09 14:30:49 来源:亿速云 阅读:95 作者:iii 栏目:开发技术

本篇内容介绍了“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”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI