<
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
>
<
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',
重新打包即可
网上有的文章说安装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…
