Webpack 4 + Babel 7 块的 Eval 错误

Question

Babel 7 + Webpack 4 块未在 Edge 中加载。在 Firefox、Chrome、Safari、Opera 中工作。

当我加载一个页面和我的入口 js 文件 (build.js) 时，edge 会尝试加载我认为是块的内容，但会加载如下内容。

https://www.myurl.com/mypage/eval%20code%20(36297)

控制台中没有错误。

我尝试更新我的 babel 配置以包含不同的预设/插件，并由 .browserslistrc 更新为“默认”，这在过去一直有效。

babel.config.js

module.exports = function (api) {
    api.cache(false);

    const presets = [
        [
            '@babel/preset-env',
            {
                "useBuiltIns": "entry",
                "corejs": 3,
            },
        ],
    ].filter(Boolean);

    const plugins = [
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-transform-runtime",

    ].filter(Boolean);

    return {
        presets,
        plugins,
    };
};

.browserslistrc

defaults

webpack.config.js

module.exports = {
    stats: {
        children: true,
    },
    entry: [
        "core-js/modules/es.promise",
        "core-js/modules/es.array.iterator",
        './application/resources/js/app.js',
    ],
    output: {
        path: path.resolve(__dirname, './public'),
        publicPath: assets_path,
        filename: 'js/build.js',
        chunkFilename: 'js/chunk.[chunkhash].js',
    },
    performance: {
        hints: "warning",
    },
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin(),
            new TerserPlugin({
                sourceMap: true,
            }),
        ],
    },
    plugins: getPlugins(),
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },

            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                include: [
                    path.resolve(__dirname, './application/'),
                    /vue2-datatable-component/,
                ],
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ],
            },
            {
                test: /\.styl(us)?$/,
                loader: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'stylus-loader',
                ],
            },
            {
                test: /\.s(c|a)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            implementation: require('sass'),
                            fiber: require('fibers'),
                            indentedSyntax: true, // optional
                        },
                    },
                ],
            },
        ],
    },
}

Answer 1

您使用的是哪个版本的 Microsoft Edge 浏览器？基于this document，如果您需要使用transform-runtime 支持core-js，您现在将传递corejs 选项并使用@babel/runtime-corejs2 依赖而不是@babel/runtime。像这样：

# install the runtime as a dependency
npm install @babel/runtime-corejs2
# install the plugin as a devDependency
npm install @babel/plugin-transform-runtime --save-dev

和

{
  "plugins": [
-   ["@babel/plugin-transform-runtime"],
+   ["@babel/plugin-transform-runtime", {
+     "corejs": 2,
+   }],
  ]
}