Question

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

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

vendor.bundle.js已在main.bundle.js之前加载，因此不是问题。如果我查看vendor.bundle.js中有错误的行

class Features {
  // ...
}

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

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

有趣的是，如果我检查有问题node_module的源代码，则src是ES6，但dist文件是ES5。反正是为了确保WebPack捆绑dist文件，还是通过普通import机制包含并让WebPack转换代码更好？

module.exports = function（env）{ var nodeEnv = env＆amp;＆amp; env.prod？＆＃34;生产＆＃34; ：＆＃34;开发＆＃34 ;; var isProd = nodeEnv ===＆＃34; production＆＃34 ;;

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.

如果由于某种原因这不起作用，那么你可能需要通过带有webpack的babel传递已编译的打字稿以获得最终的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和transiled / bundled代码正在IE11 [Prod]上运行，但不在webpack-dev-server上。

降级到2.7.1版后，它运行了。

IE11 Script1002语法错误。 WebpackJsonP未定义

2 个答案: