Laravel 5.6 - компоненты Async / Lazy load vue с laravel-mix и веб-пакетом

Question

Laravel 5.6.21
NPM 6.1.0
Node 10.5.0
Webpack 3.12.0

Мой вопрос заключается в том, как правильно настроить laravel-mix, webpack и babel для успешной отложенной загрузки vue компонентов, используя метод, описанный здесь: Ленивые маршруты загрузки

Более конкретнос использованием синтаксиса stage-2 (es2018?) следующим образом:

const Foo = () => import('./Foo.vue')

При попытке компилировать с использованием laravel-mix все операторы, напоминающие приведенный выше синтаксис, генерируют ошибку (пример):

 Syntax Error: Unexpected token (1:24)

 1 | const Dashboard = () => import("Pages/Account/Dashboard.vue");

   |                         ^

Я считаю, что laravel-mix использует Babel для переноса и чтения, что Babel нуждается в 'syntax-dynamic-import', поэтому я создал файл .bablerc со следующим содержимым:

{
  "plugins": [
    "syntax-dynamic-import"
  ]
}

Поскольку файл конфигурации bable неЧтобы решить эту проблему, я также попробовал файл конфигурации eslint со следующим содержимым:

module.exports = {
  plugins: ["vue"], // enable vue plugin
  extends: ["plugin:vue/recommended", "prettier"], // activate vue related rules
  parserOptions: {
    "parser": "babel-eslint",
    "ecmaVersion": 7,  //also tried 8
    "sourceType": "module",
    "ecmaFeatures": {
      "globalReturn": false,
      "impliedStrict": false,
      "jsx": false,
      "experimentalObjectRestSpread": false,
      "allowImportExportEverywhere": false
    }
  }
}; 

Наконец, копия зависимостей в package.json:

  "devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.24",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-imports": "^1.5.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-preset-vue-app": "^2.0.0",
    "cross-env": "^5.2.0",
    "eslint": "^4.19.1",
    "eslint-config-prettier": "^2.9.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-html": "^4.0.1",
    "eslint-plugin-vue": "^4.5.0",
    "expect": "^22.0.3",
    "jsdom": "^11.5.1",
    "jsdom-global": "^3.0.2",
    "laravel-mix": "^2.1.14",
    "less": "^3.5.3",
    "less-loader": "^4.1.0",
    "mocha": "^4.0.1",
    "mocha-webpack": "^1.0.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-loader": "^13.7.2",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.13",
    "vue-test-utils": "^1.0.0-beta.8",
    "webpack": "^3.12.0",
    "webpack-auto-inject-version": "^1.1.0"
  },

Любойпомощь в решении этой проблемы будет принята с благодарностью.

Answer 1

Я использовал со следующим в .eslintrc.json.

"extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
],
"plugins": [
    "vue"
],
"parser": "vue-eslint-parser",
"parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 8,
    "ecmaFeatures": {
        "jsx": true
    },
    "sourceType": "module"
},

Также проверьте путь к вашей функции динамического импорта const Dashboard = () => import("Pages/Account/Dashboard.vue");.Я думаю, что это должен быть относительный путь что-то вроде const Dashboard = () => import("./Pages/Account/Dashboard.vue");