Question

我正在使用webpack来转换我的React应用程序，而且一切似乎都在Chrome中运行良好。这是我的webpack.config中的条目：

var webpack = require('webpack')
var path = require('path')
var autoprefixer = require('autoprefixer')

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: {
    bundle: [ 'babel-polyfill', './client/index.js', 'webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr' ],
    vendor: [ 'react' ]
  },
  output: {
    path: path.join(__dirname, '../', 'dist'),
    filename: '[name].js',
    publicPath: '/'
  },
  resolve: {
    extensions: [ '', '.js', '.jsx' ]
  },
  module: {
    loaders: [
      {
        test: /\.js/,
        loaders: [ 'react-hot', 'babel' ],
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|woff|woff2|eot|ttf|otf|svg)$/,
        loader: 'url-loader?limit=100000',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        loaders: [ 'style', 'css', 'postcss', 'sass' ],
        exclude: /node_modules/
      }
    ]
  },
  postcss: function () {
    return [ autoprefixer({ browsers: [ 'last 2 versions' ] }) ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('dist', 'vendor.js'),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
}

我的应用在Chrome中完美运行并运行，但在任何其他浏览器（Firefox，Safari，Chrome手机等）中，我收到的错误似乎与babel-polyfill没有包含在内。

在Firefox中，这是SyntaxError: let is a reserved identifier

另外，我知道我正确地包含babel-polyfill因为我能够通过两种方式同时包含polyfill来使浏览器遇到错误：Error: only one instance of babel-polyfill is allowed。

导致这种情况的原因是什么？我很困惑，如果babel-polyfill没有正确包含，Chrome会有效。

修改我认为.babelrc对于babel编译是令人满意的，但也许我错了。这是我的.babelrc：

{
  "presets": [ "es2015-node4", "stage-2", "react" ],
  "plugins": [
    "transform-async-to-generator",
    "syntax-async-functions",
    "transform-object-rest-spread"
  ]
}

babel-polyfill无法在浏览器中运行

0 个答案: