Dynamic Imports for Code Splitting cause: ESLint Parsing Error 'import'

问题

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

Example Route:

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

Example Error:

[eslint] Parsing error: Unexpected token import

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
}

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!

回答1:

.eslintrc.js

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

Should Be:

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

Source: https://eslint.org/docs/user-guide/configuring#specifying-parser

With (@vue/cli) .eslintrc.json

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

来源：https://stackoverflow.com/questions/47815775/dynamic-imports-for-code-splitting-cause-eslint-parsing-error-import

标签

Vue.js

vuejs2

babel

eslint

vue-router