ESLint和Jest中怎么使用esm

什么是ESM

ESM，全称为ECMAScript Modules，是JavaScript官方标准化的模块化方案。ESM支持导出、导入模块，并且支持动态导入。ESM是在代码解析时处理导入和导出，而不是在运行时。而Node.js之前的模块加载方案，例如CommonJS，它是在运行时通过require函数加载，在同步加载模块时效率较高，但是在异步加载和浏览器端，CommonJS不能实现按需加载，也无法支持动态导入。

    <h4>示例1：ES6模块导入导出</h4>
    <script type="module">
        // 导出模块
        export const name = 'John';

        // 导入模块
        import { name } from './module.js';
        console.log(name);  // 输出'John'
    </script>
    

在ESLint中使用ESM

在使用ESLint的时候，如果在代码中使用了ES6的模块导入导出，ESLint会报错，因为ESLint默认使用的是CommonJS模块化方案。因此需要安装eslint-plugin-es，这个插件提供了ESM支持。

    <h4>示例2：ESLint中使用ESM</h4>
    npm install --save-dev eslint eslint-plugin-es
    
    // .eslintrc.js
    module.exports = {
        "plugins": ["es"],
        "rules": {
            "es/no-modules": "error"
        }
    };
    

在Jest中使用ESM

使用Jest测试框架时，如果要使用ES6的模块导入导出，需要在启动测试前执行命令：`node --experimental-modules node_modules/jest/bin/jest.js`，这样才能支持ESM的模块化方案。否则Jest会报错：`SyntaxError: Unexpected token export`。

    <h4>示例3：Jest中使用ESM</h4>
    // package.json
    {
        "scripts": {
            "test": "node --experimental-modules node_modules/jest/bin/jest.js"
        }
    }
    

总结

ESM是JavaScript官方标准化的模块化方案，支持导出、导入模块以及动态导入，而Node.js之前的模块加载方案，例如CommonJS，不能实现按需加载和动态导入。在使用ESLint检查代码的时候，需要安装eslint-plugin-es插件来支持ESM。在使用Jest测试框架时，需要在启动测试前执行命令’node --experimental-modules node_modules/jest/bin/jest.js’，这样才能支持ESM的模块化方案。