ESLint报错：Parsing error: 'import' and 'export' may only appear at the top level

1、问题描述

在学习webpack代码分割，按需加载时，ESLint检查import报错，因为ESLint不支持动态导入。

2、代码

实现目标，点击按钮的时候再去加载mult.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">测试模块动态导入</button>
</body>
</html>

src/mult.js

export function mult (...args) {
    return args.reduce((total, current) => total * current, 1)
}

src/mian.js

document.querySelector('#btn').onclick = function(){
  import('./js/mult').then(({ mult }) => {
    console.log('mult',mult(1,2,3,4));
  })
}

webpack编译的时候就会输出以下报错

ERROR in [eslint] 
E:\1.develop\webpack-demo\src\main.js 
  20:3 error Parsing error: 'import' and 'export' may only appear at the top level 
   ✖ 1 problem (1 error, 0 warnings)

   webpack 5.75.0 compiled with 1 error in 17633 ms

以上的错误ES6模块语法是允许这样写的, ESLint却把它当成错误来处理。

3、报错原因

ESLint默认解析器不支持动态导入

4、解决办法

通过ESLint解析器@babel/eslint-parser来解决

安装依赖
```
npm instasll -D @babel/eslint-parser
```

在.eslintrc.js中添加配置

... 
  + parser: "@babel/eslint-parser",
    parserOptions: {
        sourceType: 'module', 
    }
...

重新打包即可

5、延伸

网上有的文章说安装babel-eslint，但是babel-eslint已被弃用，会报以下错误：

Parsing error: require() of ES Module E:\1.develop\webpack-demo\node_modules\eslint\node_modules\eslint-scope\lib\definition.js from E:\1.develop\webpack-demo\node_modules\babel-eslint\lib\require-from-eslint.js not supported

需要先移除babel-eslint，然后安装@babel/eslint-parser。详情请看：github.com/babel/babel…