用于 Internet Explorer 10 及以下版本的 React、WebPack 和 Babel 会产生 SCRIPT1002：语法错误

Question

我已经阅读了有关类似问题的多个主题并尝试了一些建议，但没有结果。

我学习了一些与 React.js 和 WebPack 3 相关的教程。结果，除了 IE 10 及以下版本之外，该应用程序在所有浏览器（目前）上都运行良好。错误指向 bundle.js（一旦我使用配置 Nr.1）：
SCRIPT1002: Syntax error 和行 - const url = __webpack_require__(83);

使用配置 Nr2.，在本地服务器上 - : SCRIPT1002: Syntax error - 与 eval() 一致 同样的配置，但在远程服务器上运行会产生一些不同的错误：

SCRIPT5009: 'Set' is undefine

WebPack 配置 Nr1.:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './index.html',
  filename: 'index.html',
  inject: 'body'
})
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        exclude: /node_modules/,
        loader: 'json-loader'
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      }
    ],
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,      
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react']
          }
        }
      }
    ]
 },
   devServer: {   
      historyApiFallback: true,
      contentBase: './'
  },
 plugins: [HtmlWebpackPluginConfig]
}

WebPack 配置 Nr2.:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const autoprefixer = require('autoprefixer');

const staticSourcePath = path.join(__dirname, 'static');
const sourcePath = path.join(__dirname);
const buildPath = path.join(__dirname, 'dist');

module.exports = {
    stats: {
        warnings: false
    },
    devtool: 'cheap-eval-source-map',
          devServer: {    
          historyApiFallback: true,
          contentBase: './'
      },
    entry: {
        app: path.resolve(sourcePath, 'index.js')
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].[chunkhash].js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
        modules: [
            sourcePath,
            path.resolve(__dirname, 'node_modules')
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: 'vendor.[chunkhash].js',
            minChunks: Infinity
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [
                    autoprefixer({
                        browsers: [
                            'last 3 version',
                            'ie >= 10'
                        ]
                    })
                ],
                context: staticSourcePath
            }
        }),
        new webpack.HashedModuleIdsPlugin(),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'index.html'),
            path: buildPath,
            excludeChunks: ['base'],
            filename: 'index.html',
            minify: {
                collapseWhitespace: true,
                collapseInlineTagWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true
            }
        }),
        new PreloadWebpackPlugin({
            rel: 'preload',
            as: 'script',
            include: 'all',
            fileBlacklist: [/\.(css|map)$/, /base?.+/]
        }),
        new webpack.NoEmitOnErrorsPlugin(),
        new CompressionPlugin({
            asset: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
            threshold: 10240,
            minRatio: 0.8
        })      
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['env', 'react', 'es2015'],
                    plugins: ["transform-es2015-arrow-functions"]
                  }
                },
                include: sourcePath
            },
            {                
                test: /\.css$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { minimize: true } },
                        'postcss-loader',
                        'sass-loader'
                    ]
                })
            },
            {
                test: /\.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/,
                use: 'file-loader?name=assets/[name]-[hash].[ext]'
            },
            {
                test: /\.(png|gif|jpg|svg)$/,
                use: [
                    'url-loader?limit=20480&name=assets/[name]-[hash].[ext]'
                ],
                include: staticSourcePath
            }
        ]
    }
}; 

这里我还添加了 es2015 到预设中：['env', 'react', 'es2015'] 和 plugins: ["transform-es2015-arrow-functions"] 但没有任何意义。

如果 babel 加载器由于配置错误或其他原因根本无法工作，我认为整个应用程序将无法启动。我认为应该对预设或它们的顺序做一些事情......需要经验丰富的开发人员的建议

更新 我已将 devtool 更改为 inline-cheap-module-source-map 并将错误点指向 overlay.js -> const ansiHTML = require('ansi-html');

Answer 1

在您的 package.json 文件中

将 webpack-dev-server 的版本更改为“2.7.1”（或更早）版本。

"webpack-dev-server": "2.7.1"

然后执行 npm install 等等。

这解决了我的问题。

2.7.1 之后的所有版本都给我一个类似于你的错误。

Answer 2

只需将devtools : "source-map" 添加到您的 Webpack 配置中，如下所示：

const path = require('path');
module.exports = {
  devtool: "source-map",
  entry: ['babel-polyfill', path.resolve(__dirname, './js/main.js')],
  mode: 'production',
  output: {
    path: __dirname+'/js/',
    filename: 'main-webpack.js'
  }
};

这将删除 eval 并将您的源映射更改为受 IE 支持。

更新我已将 devtool 更改为 inline-cheap-module-source-map 并将错误点指向 overlay.js -> const ansiHTML = require('ansi-html');

为了支持 ES6 语法，你必须使用 Babel 编译你的 JavaScript 代码。