vue.js - 动态导入导致错误：当前未启用对实验语法“dynamicImport”的支持

Posted 2023-02-22

【中文标题】vue.js - 动态导入导致错误：当前未启用对实验语法“dynamicImport”的支持

【英文标题】：vue.js - dynamic imports results in error: Support for the experimental syntax 'dynamicImport' isn't currently enabled

【发布时间】：2019-06-26 21:52:40

【问题描述】：

我今天第一次使用 Webpack 学习 Vue.js，并尝试让路由器处理惰性/动态导入。

我想使用惰性/动态导入，因为我正在重建我的内容管理系统，该系统有很多页面可能会或可能不会在用户会话期间使用，因此在需要时动态加载他们需要的模块，对我的申请更有意义。

我非常基本的路由器目前看起来像这样：

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.js 中的错误模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：语法错误： ...../src/router/index.js：支持实验性语法 'dynamicImport' 当前未启用

附注：

将@babel/plugin-syntax-dynamic-import 添加到 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"
  

【参考方案1】：

经过数小时的挫折后，我自己解决了这个问题。我仍然不知道为什么 Babel、Webpack 和 Vue 文档中使用的方法不起作用，但我确实做到了：

我首先从 babel.rc 文件中删除了插件声明，然后在 webpack.config 文件中为 babel 加载器添加了一个选项：

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

我希望这对其他人有所帮助。

【讨论】：

刚刚和那个一起度过了我的一天！但我确实同意错误消息确实具有误导性。非常感谢

【参考方案2】：

你有错误的插件分配：

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

应该是该插件的正确格式。

【讨论】：

很抱歉浪费您的时间，但我在发布问题时忘记将其改回。这是我第一次安装插件时使用的插件参考，但最终为了让它工作而更改了几次。