IE11 Script1002 语法错误。 WebpackJsonP 未定义

Question

我正在使用 Typescript 和 WebPack 3，在 IE11 的开发模式下进行测试时遇到了问题。我得到的错误是：

• Script1002：语法错误。 vendor.bundle.js
• Script5009：webpackJsonp 未定义。 main.bundle.js

vendor.bundle.js 在我的main.bundle.js 之前加载，所以这不是问题。如果我查看 vendor.bundle.js 中出现错误的行是

class Features {
  // ...
}

我假设错误是因为类是 ES6 功能而 IE11 不支持它。这是node_modules 目录中的一个依赖，它是一个js 文件，用ES6 编写。

然后我的问题是，假设这一切都是正确的（我不是 100% 确定因此背景故事）那么我如何让 webpack 将其转换为 ES5？我将我的 tsconfig.json 中的目标设置为我的 Typescript 的 ES5，但这显然在这里没有帮助。

有趣的是，如果我检查有问题的node_module 的源代码，src 是 ES6，但 dist 文件是 ES5。有没有办法确保 WebPack 捆绑 dist 文件，或者通过普通的import 机制包含并让 WebPack 转译代码更好？

module.exports = 功能（环境）{ var nodeEnv = env && env.prod ？ “生产”：“发展”； var isProd = nodeEnv === "生产";

var plugins = [
    new HtmlWebpackPlugin({
        hash: true,
        template: "../index.html",
        filename: "index.html" //relative to root of the application
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        minChunks: Infinity,
        filename: "vendor.bundle.js"
    }),
    new webpack.EnvironmentPlugin({
        NODE_ENV: nodeEnv,
    }),
    new ExtractTextPlugin({
        filename: "app.bundle.css",
        disable: !isProd
    }),
    new webpack.ProvidePlugin({
        "_": "lodash",
        "window.moment": "moment",
        "window.jQuery": "jquery"
    }),
    new webpack.IgnorePlugin(/\.\/locale$/)
];

if (isProd) {
    plugins.push(new webpack.SourceMapDevToolPlugin({
        filename: '[file].js.map',
        append: false,
        exclude: ['vendor.bundle.js']
    }));

    plugins.push(new webpack.optimize.UglifyJsPlugin({
        parallel: true,
        mangle: true,
        compress: {
            warnings: false,
            screw_ie8: true,
            conditionals: true,
            unused: true,
            comparisons: true,
            sequences: true,
            dead_code: true,
            evaluate: true,
            if_return: true,
            join_vars: true,
        },
        output: {
            comments: false,
        },
    }));
}
else {
    plugins.push(new webpack.SourceMapDevToolPlugin({
        filename: '[file].js.map',
        exclude: ['vendor.bundle.js']
    }));

    plugins.push(new webpack.HotModuleReplacementPlugin());
    plugins.push(new webpack.NamedModulesPlugin());
}

return {
    watch: !isProd,
    context: sourcePath,
    entry: {
        main: sourcePath + "/bootstrap.ts",
        vendor: ["@uirouter/angularjs/release/stateEvents.js"].concat(Object.keys(package.dependencies))
    },
    output: {
        path: destPath,
        filename: "[name].bundle.js",
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                exclude: /node_modules/,
                loader: "html-loader"
            },
            {
                test: /\.(s*)css$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: { minimize: isProd, sourceMap: true }
                        },
                        {
                            loader: "postcss-loader",
                            options: { sourceMap: true }
                        },
                        {
                            loader: 'sass-loader',
                            options: { sourceMap: true }
                        }
                    ],
                })
            },
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                use: ["awesome-typescript-loader"],
            },
        ],
    },
    resolve: {
        extensions: [".js", ".ts"],
        modules: [
            "node_modules"
        ]
    },

    plugins: plugins,

    performance: isProd && {
        maxAssetSize: 100,
        maxEntrypointSize: 300,
        hints: "warning",
    },

    stats: {
        colors: {
            green: "\u001b[32m",
        }
    },

    devServer: {
        //contentBase: "./src",
        historyApiFallback: true,
        port: 3000,
        compress: isProd,
        inline: !isProd,
        hot: !isProd,
        stats: {
            assets: true,
            children: false,
            chunks: false,
            hash: false,
            modules: false,
            publicPath: false,
            timings: true,
            version: false,
            warnings: true,
            colors: {
                green: "\u001b[32m",
            }
        },
    }
};

};

Answer 1

通过正常的导入机制包含并让 WebPack 转译代码会更好吗？

正确。

Normally typescript wouldn't transpile any of your node modules, you would import the build files of those modules which are normally transpiled ES5.

如果由于某种原因这不起作用，那么您可能需要通过 babel 和 webpack 传递您编译的打字稿以获得最终的 ES5 包。

See here an example of cascading through ts then babel loaders to achieve the desired output.

这通常不是必需的，因为您应该使用 ES5 版本的导入。

Answer 2

您能否检查并确认您的 webpack-dev-server 版本。 我也遇到了与最新版本的 webpack-dev-server 类似的问题，并且转译/捆绑的代码在 IE11 [Prod] 上工作，但在 webpack-dev-server 上没有。

降级到 2.7.1 版后，它可以工作了。