代码拆分的动态导入原因:ESLint 解析错误“导入" [英] Dynamic Imports for Code Splitting cause: ESLint Parsing Error 'import'

问题描述

我正在使用此处找到的 VueJS Webpack 模板:https://github.com/vuejs-templates/webpack

I'm using the VueJS Webpack template found here: https://github.com/vuejs-templates/webpack

示例路线:

const AuthRoute = () => import(/* webpackChunkName: "authroute" */ './AuthRoute.vue')

示例错误:

[eslint] 解析错误:意外的令牌导入

[eslint] Parsing error: Unexpected token import

我遵循了 Webpack 的动态导入部分中提供的步骤，以及 Anthony Gore 的关于如何在路由器级别使用 VueJS 完成代码拆分的博客文章.更具体地说，这是我的设置:

I've followed the steps provided in Webpack's Dynamic import section, as well as Anthony Gore's blog post on how to accomplish code splitting with VueJS at the router level. More specifically, here is my setup:

Package.json

...
"babel-core": "^6.22.1",
"babel-eslint": "^8.0.3",
"babel-jest": "^21.2.0",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-webpack": "^1.0.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.24.1",
"eslint": "^4.13.1"
...

.babelrc

{
  "presets": [
    ["env", {
      "modules": false
    }],
    "stage-2"
  ],
  "plugins": [
    "dynamic-import-webpack",
    "syntax-dynamic-import",
    "transform-runtime"
  ],
  "env": {
    "test": {
      "presets": ["env", "stage-2"]    }
  }
}

.eslintrc.js

parserOptions: {
  parser: 'babel-eslint',
  sourceType: 'module',
  allowImportExportEverywhere: true
}

我不知道为什么我仍然看到这个错误.使用 npm run dev 和 npm run build 时，我的代码按预期运行，但此解析错误阻止了文件的其余部分被 linted，我无法压制它.

I'm at a bit of a loss as to why I'm still seeing this error. My code runs and works as expected when using npm run dev and npm run build, but this parsing error prevents the rest of the file from being linted, and I am unable to suppress it.

感谢任何/所有帮助！

推荐答案

.eslintrc.js

parserOptions: {
  parser: 'babel-eslint',
  sourceType: 'module',
  allowImportExportEverywhere: true
}

应该是:

parser: 'babel-eslint',
parserOptions: {
  sourceType: 'module',
  allowImportExportEverywhere: true
}

来源:https://eslint.org/docs/user-guide/配置#specifying-parser

与 (@vue/cli).eslintrc.json

{
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 8,
    "sourceType": "module"
  }
}

这篇关于代码拆分的动态导入原因:ESLint 解析错误“导入"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！