IE11 Script1002語法錯誤。 WebpackJsonP未定義

Question

我正在使用Typescript和WebPack 3，並且在IE11中以開發模式進行測試時遇到了問題。 我得到的錯誤是：

• Script1002：語法錯誤。 vendor.bundle.js
• 腳本5009：webpackJsonp是未定義的。 main.bundle.js

vendor.bundle.js在我的main.bundle.js之前加載，所以這不是問題。 如果我看vendor.bundle.js中的行有錯誤是

class Features {
  // ...
}

我以為那是因為該錯誤是因為class是ES6功能，而IE11不支持它。 這是node_modules目錄中的依賴node_modules ，它是一個js文件，用ES6編寫。

然后我的問題是，假設這一切都是正確的（我不確定是100％的背景故事），那么我如何獲得webpack將此轉換為ES5？ 我在我的tsconfig.json的目標設置為ES5，但這顯然無濟於事。

有趣的是，如果我檢查有問題的node_module的源代碼，則src是ES6，而dist文件是ES5。 無論如何，有什么方法可以確保WebPack捆綁dist文件，還是最好通過常規import機制將其包含進來，並讓WebPack轉換代碼？

module.exports =函數（env）{var nodeEnv = env && env.prod嗎？ “生產”：“發展”; var isProd = nodeEnv ===“ production”;

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轉換代碼會更好嗎？

正確。

通常，打字稿不會轉換您的任何節點模塊，您將導入通常已轉換為ES5的那些模塊的構建文件。

如果由於某種原因而無法使用，則可能需要使用webpack通過babel傳遞已編譯的打字稿，以獲得最終的ES5捆綁包。

請參閱此處的示例，先進行級聯然后通向Babel加載器，以實現所需的輸出。

盡管您應該使用導入的ES5版本，但這通常通常不是必需的。

Answer 2

您能檢查並確認您的webpack-dev-server版本嗎？ 我還面臨着最新版本的webpack-dev-server的類似問題，並且已在IE11 [Prod]上運行了轉譯/捆綁的代碼，但在webpack-dev-server上卻沒有。

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