vue.js - динамический импорт приводит к ошибке: поддержка экспериментального синтаксиса «dynamicImport» в настоящее время не включена - PullRequest
Новая
       46

vue.js - динамический импорт приводит к ошибке: поддержка экспериментального синтаксиса «dynamicImport» в настоящее время не включена

0 голосов
/ 02 февраля 2019

Я изучаю Vue.js с Webpack впервые сегодня и пытаюсь заставить маршрутизатор работать с отложенным / динамическим импортом.

Я хочу использовать отложенный / динамический импортпотому что я перестраиваю свою систему управления контентом, которая имеет много, много страниц, которые могут или не могут использоваться во время сеанса пользователя, поэтому загрузка модулей, которые им нужны динамически, когда они им нужны, имеет больше смысла в отношении моего приложения.

Мой базовый маршрутизатор в настоящее время выглядит следующим образом: 

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

function loadView(view) {
    return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`);
}

export default new Router({
    routes: [
        {
            path: "/",
            name: "dashboard",
            component: loadView("Dashboard")
        },
        {
            path: "/login",
            name: "login",
            component: loadView("Login")
        }
    ]
});

Однако я сталкиваюсь со следующей ошибкой компиляции:

ОШИБКА в ./src/router/indexНе удалось собрать модульenabled

С дополнительным примечанием:

Добавьте @ babel / plugin-syntax-dynamic-import в раздел «plugins» вашей конфигурации Babel, чтобы включить синтаксический анализ.

А показываетмне, какая строка является проблемой, которая в любом случае совершенно очевидна: 

return () => import(/*..........
             ^

Я узнал эту ошибку с тех пор, как несколько месяцев назад играл в Webpack самостоятельно, поэтому я знал, что мне нужно установить динамическийПлагин импорта, чтобы заставить это работать.

Это то, что я установил: 

npm install babel-plugin-syntax-dynamic-import

И я сделал этот плагин доступным в моем babel.rc файле конфигурации и запустил npm run dev, чтобы перекомпилировать все:

{
    "presets": [
        [
            "@babel/env", {
                "modules": false,
                "targets": {
                    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
                }
            }
        ]
    ],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

Но я все еще получаю сообщение об ошибке и не могу использовать функции динамического импорта!Я делаю что-то неправильно?У кого-нибудь еще были проблемы с работой динамического импорта?

Мой файл webpack.config: 

'use strict';

const webpack = require('webpack');
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: [
        './src/app.js'
    ],
    devServer: {
        hot: true,
        watchOptions: {
            poll: true
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.js$/,
                use: 'babel-loader'
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                            outputStyle: 'compressed',
                            data: `
                                @import "./src/assets/scss/_variables.scss";
                                @import "./src/assets/scss/_mixins.scss";
                            `
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        alias: {
            "@": path.resolve(__dirname, './src'),
            "Components": path.resolve(__dirname, './src/components/')
        }
    },
    optimization: {
        minimizer: [new UglifyJsPlugin()],
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        })
    ]
}

Мой файл package.json: 

{
  "name": "manage_v2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config build/webpack.config.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "vue": "^2.5.22",
    "vue-router": "^3.0.2",
    "vuex": "^3.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.3.1",
    "babel-loader": "^8.0.5",
    "babel-plugin-dynamic-import-webpack": "^1.1.0",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "uglifyjs-webpack-plugin": "^2.1.1",
    "vue-loader": "^15.6.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

Ответы [ 2 ]

0 голосов
/ 02 февраля 2019

Я сам исправил проблему после многих часов разочарования.Я до сих пор не знаю, почему метод, который используется в документации Babel, Webpack и Vue, не работает, но у меня все получилось:

Сначала я удалил объявление плагина из файла babel.rc, а затем добавилопция для загрузчика babel в файле webpack.config: 

{
    test: /\.js$/,
    use: {
        loader: "babel-loader",
        options: {
            plugins: [
                "@babel/plugin-syntax-dynamic-import"
            ]
        }
    }
}

Надеюсь, это поможет другим.

0 голосов
/ 02 февраля 2019

У вас неправильное назначение плагина: 

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

Будет правильным форматом для этого плагина.

...