web-dev-qa-db-fra.com

Importations dynamiques pour cause de fractionnement de code: erreur d'analyse ESLint 'importation'

J'utilise le modèle VueJS Webpack trouvé ici: https://github.com/vuejs-templates/webpack

Exemple d'itinéraire: 

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

Exemple d'erreur:

[eslint] Erreur d'analyse: importation inattendue de jetons

J'ai suivi les étapes fournies dans la section d'importation dynamique de Webpack, ainsi que le billet de blog d'Anthony Gore sur la façon d'effectuer le fractionnement de code avec VueJS au niveau du routeur. Plus précisément, voici ma configuration:

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
}

Je ne comprends pas pourquoi je vois toujours cette erreur. Mon code s'exécute et fonctionne comme prévu lors de l'utilisation de npm run dev et npm run build, mais cette erreur d'analyse empêche le reste du fichier d'être pelucheux et je ne parviens pas à le supprimer.

Toute/toute aide est appréciée!

vue.jsvuejs2babeleslintvue-router
12
Daniel Brown

. eslintrc.js

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

Devrait être: 

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

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

Avec (@ vue/cli) . Eslintrc.json

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

Cette question et réponse StackOverflow m'a aidé à résoudre ce problème, mais actuellement en avril 2020, la clé parser semble être requise dans parserOptions, ou du moins pour ma combinaison de paramètres.

Je vais montrer ma configuration actuelle que j'utilise avec Laravel 7/Laravel Mix et 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"]
            }
        }
    }
}

Vous n'aurez besoin de cette clé settings que si vous utilisez des alias Webpack.

package.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.js

Si vous utilisez Webpack "normalement" sans Laravel Mix, vous trouverez que votre syntaxe est un peu différente ici, mais si vous utilisez des alias Webpack, vous trouverez cela utile:

// 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`,
        },
    },
});

Remarque finale: je recommande toujours l'utilisation de airbnb-base config et s'appuyer dessus pour former la base de vos règles lint car il a été créé pour des environnements multi-développeurs exécutant des techniques de programmation fonctionnelle inconditionnelles pour un flux de données immuable et unidirectionnel - et donc, une programmation réactive fonctionnelle tout en évitant les pièges de JavaScript ... et se concentrer sur le code déclaratif tout en évitant les types de code impératif raisonnablement mauvais.

J'ai écrit quelques mots à ce sujet dans mon article sur la configuration d'ES Lint dans Vue pour Airbnb: https://medium.com/@agm1984/how-to-set -up-es-lint-for-airbnb-vue-js-and-vs-code-a5ef5ac671e8

1
agm1984