ESLint和Jest中使用esm示例详解

简介

ESLint是一个开源的JavaScript代码检查工具，它的目标是保证代码的一致性和避免错误。ESLint支持插件，我们可以使用它来编写自定义规则，以便强制执行代码的有效性和可读性。

Jest是一个流行的JavaScript测试框架，可用于测试React、Vue等前端框架以及Node.js应用程序等等，其功能强大且易于上手。

现在，我们将详细介绍如何在ESLint和Jest中使用esm模块，以更好地管理JavaScript代码。

安装依赖

在ESLint和Jest中使用esm需要先安装相关依赖：

npm install eslint eslint-plugin-import jest @babel/core @babel/preset-env --save-dev

eslint和eslint-plugin-import是用于ESLint的基础依赖，并且需要配置esm规则。
jest是Jest测试框架的依赖之一。
@babel/core和@babel/preset-env是用于转换es6代码的依赖。

配置ESLint

在项目根目录下新建.eslintrc.js配置文件，并添加如下配置：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es2021: true,
    jest: true
  },
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2021
  },
  extends: [
    'eslint:recommended'
  ],
  plugins: [
    'import'
  ],
  rules: {
    'import/no-unresolved': 'error'
  }
};

在上述配置中，我们：

设置env为node和es2021，以支持es6语法。
设置parserOptions以识别module类型源文件。
引入eslint:recommended插件。
引入import插件，以便后续设置规则。
配置'import/no-unresolved': 'error'规则来强制检查未解析的模块。

我们还需要在package.json中添加以下于ESLint相关的npm script：

{
  "scripts": {
    "lint": "eslint ."
  }
}

配置Jest

在项目根目录下，我们还需要新建一个jest.config.js配置文件，并将以下代码添加到其中：

module.exports = {
  transform: { '\\.[jt]sx?$': ['@babel/preset-env'] }
};

在此配置文件中，我们将Jest的transform选项设置为使用@babel/preset-env进行es6和其他高级语法的转换。

示例1：ESLint中使用ESM包

在一个新的JavaScript文件中，测试IMPORT语句的ESLint规则。

import fs from 'fs';
import express from 'express';

使用命令npm run lint去检测这个文件。我们会看到ESLint会报错：

error  Unable to resolve path to module 'fs'         import/no-unresolved
error  Unable to resolve path to module 'express'    import/no-unresolved

这是因为fs和express这两个模块的默认引入方式是使用CommonJS语法：

const fs = require('fs');
const express = require('express');

我们可以在我们的.eslintrc.js文件中添加以下规则，来支持ESM导入语法：

module.exports = {
  ...
  rules: {
    'import/no-unresolved': 'error',
    'import/extensions': ['error', 'never'],
    'import/no-extraneous-dependencies': [
      'error',
      {
        devDependencies: true
      }
    ]
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx']
      }
    },
    'import/extensions': ['.js', '.jsx', '.ts', '.tsx']
  }
};

在上述配置中我们：

设置了'import/extensions': ['error', 'never']规则，来允许不包含文件后缀的IMPORT语句。
设置了'import/no-extraneous-dependencies': ['error', {devDependencies: true}]来忽略对devDependencies的警告。
设置了'import/resolver'和'import/extensions'配置项，以便导入带有拓展名的ESM模块。

注意：如果应用程序集成使用了Node.js 14或更高版本，则不需要上述配置。

示例2：Jest中使用ESM包

在一个新的JavaScript文件中编写以下测试代码，并保存在math.test.js中：

import add from './math.js';
describe('test math.js', () => {
  it('add', () => {
    expect(add(1, 2)).toBe(3);
  });
});

执行npm test，Jest会报错：

 FAIL  ./math.test.js
  ● Test suite failed to run

    TypeError: (0 , _math.default) is not a function

       9 | describe('test math.js', () => {
      10 |   it('add', () => {
    > 11 |     expect(add(1, 2)).toBe(3);
         |            ^
      12 |   });
      13 | });

      at Object.<anonymous> (math.test.js:11:12)

这个错误是因为Jest要求使用CommonJS模块语法。我们可以在项目根目录创建一个babel.config.js文件，并添加以下代码：

module.exports = {
  presets: [
    [
      '@babel/env',
      {
        targets: {
          node: 'current'
        }
      }
    ]
  ]
};

在这个配置中，我们设置了@babel/env插件以支持ES6语法及其他高级语法，同时使用node: 'current'指定了Jest要在当前使用的Node版本中运行。

再次执行npm run test将会正确运行测试用例。

总结

本文详细介绍了在ESLint和Jest中使用ESM模块的方式，具体包括安装依赖、配置ESLint和配置Jest。并提供了两个示例来展示如何在ESLint和Jest中使用ESM模块。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ESLint和Jest中使用esm示例详解 - Python技术站

ESLint和Jest中使用esm示例详解