코드 분할 원인에 대한 동적 가져오기: ESLint 구문 분석 오류 'import'

코드 분할 원인에 대한 동적 가져오기: ESLint 구문 분석 오류 'import'

VueJS Webpack 템플릿을 사용하고 있습니다.https://github.com/vuejs-templates/webpack

경로 예:

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

오류 예:

[eslint] 구문 분석 오류:예기치 않은 토큰 Import

Webpack의 Dynamic import 섹션과 Anthony Gore의 블로그 투고에 기재되어 있는 라우터 레벨에서의 VueJ에서의 코드 분할 방법에 대해 설명했습니다.구체적으로는 다음과 같습니다.

패키지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.displays

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

왜 아직도 이 오류가 표시되는지 모르겠어요.사용 시 코드가 예상대로 실행 및 작동함npm run dev그리고.npm run build그러나 이 해석 오류는 나머지 파일이 보풀이 되는 것을 방지하고 억제할 수 없습니다.

어떤 도움이라도 감사합니다!

.eslintrc.displays

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

필요조건:

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

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

포함(@vue/cli) .eslintrc.json

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

이 StackOverflow 질문과 답변이 이 문제를 해결하는 데 도움이 되었지만, 현재 2020년 4월에parser안에 키가 필요한 것 같다parserOptions, 또는 적어도 설정을 조합한 경우.

Laravel 7/Laravel Mix 및 Vue 2.6~에서 사용하는 현재 설정을 보여 줍니다.

.eslintrc.json

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "airbnb-base",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "parser": "babel-eslint",
        "ecmaVersion": 2019,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
        // dat ruleset
    },
    "settings": {
        "import/resolver": {
            "alias": {
                "map": [
                    ["@", "./resources"]
                ],
                "extensions": [".vue"]
            }
        }
    }
}

그것만 있으면 돼settings키를 누릅니다.

패키지.json

   "devDependencies": {
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.8.0",
        "eslint-config-airbnb-base": "^14.1.0",
        "eslint-import-resolver-alias": "^1.1.2",
        "eslint-plugin-import": "^2.20.2",
        "eslint-plugin-vue": "^6.2.2",
        "laravel-mix": "^5.0.1",
    }

.babelrc

{
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

webpack.config.syslog

Larabel Mix를 사용하지 않고 웹 팩을 "일반적으로" 사용하는 경우 구문은 여기서 조금 다르지만 웹 팩 별칭을 사용하는 경우 다음과 같이 유용합니다.

// use named JS bundles
mix.config.webpackConfig.output = {
    chunkFilename: 'js/[name].bundle.js',
    publicPath: '/',
};

// alias the ~/resources folder
mix.webpackConfig({
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            '@': `${__dirname}/resources`,
        },
    },
});

마지막 메모:항상 권장하는 것은airbnb-base구성 및 보풀 규칙의 기초가 되는 것은 die hard functional programming 기술을 실행하는 멀티 개발자 환경용으로 작성되었기 때문입니다.따라서 JavaScript의 함정을 피하면서 Functional Reactive Programming을 실행할 수 있습니다.그리고 상당히 나쁜 종류의 명령 코드를 피하면서 선언적 코드에 초점을 맞춥니다.

Airbnb용 Vue에서의 ES Lint 설정에 관한 기사에서 https://medium.com/@agm/how-to-setup-es-for-vue-vs-code-a5ef5ac671e8에 대해 몇 마디 더 썼습니다.

언급URL : https://stackoverflow.com/questions/47815775/dynamic-imports-for-code-splitting-cause-eslint-parsing-error-import