代码拆分的动态导入原因: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时，我的代码可以运行并按预期工作，但是此解析错误阻止文件的其余部分掉线，而我无法抑制它.

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.

任何/所有帮助都将受到赞赏！

Any/all help is appreciated!

推荐答案

.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屋！