Question

我正在处理需要在IE 8企业版上运行的应用程序。我在控制台中遇到以下错误：预期标识符：; indexOf不适用于该对象。

为了解决这个问题，我在stackoverflow上阅读了这个问题： Babel 6.0.20 Modules feature not work in IE8 它建议

变换ES3构件表达-文字变换ES3属性-文字

待补充。但是在webpack中使用它并没有在任何地方提及，而不是在babel官方网站上。任何人都可以建议我如何将它用作我项目的插件。

注意：我已经尝试过了

var es3MemberExpressionLiterals = require('babel-plugin-transform-es3-member-expression-literals');
var es3PropertyLiterals = require('babel-plugin-transform-es3-property-literals');
plugins = [// Plugins for Webpack
new webpack.optimize.UglifyJsPlugin({minimize: false}),
new HtmlWebpackPlugin({
    template: 'index.html', // Move the index.html file...
    minify: { // Minifying it while it is parsed using the following, self–explanatory options
      removeComments: false,
      collapseWhitespace: false,
      removeRedundantAttributes: false,
      useShortDoctype: false,
      removeEmptyAttributes: false,
      removeStyleLinkTypeAttributes: false,
      keepClosingSlash: true,
      minifyJS: false,
      minifyCSS: true,
      minifyURLs: false
    }
  })
 new es3MemberExpressionLiterals(),
 new es3PropertyLiterals()

];

Answer 1

我创建了一个demo repository on github来通过示例显示完整配置。

要让两个插件运行，请创建一个.babelrc文件，其中包含以下内容

{
  "plugins": [
    "transform-es3-member-expression-literals",
    "transform-es3-property-literals"
  ]
}

在babel-loader babel的标准配置webpack.config.js中，您需要查看.babelrc以配置插件。

// webpack.config.js (partial code only)
module: {
  loaders: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    }
  ]
}

如果一切设置正确，webpack应该转换以下代码

// src/main.js
var foo = { catch: function() {} };
console.log(foo.catch)

到

// bundle.js
/* 0 */
/***/ function(module, exports) {

    var foo = { "catch": function () {} };
    console.log(foo["catch"]);

/***/ }

另请参阅插件的示例：babel-plugin-transform-es3-property-literals和babel-plugin-transform-es3-member-expression-literals。

Answer 2

您链接的问题是关于Babel插件，并且您尝试将它们作为Webpack插件传递。您需要将Babel设置为应用程序的加载程序并将插件传递给它。将以下内容合并到Webpack配置中。

module: {
  loaders: [{
    loader: 'babel',
    test: /\.js$/,
    exclude: /node_modules/,
    plugins: [
      'babel-plugin-transform-es3-member-expression-literals',
      'babel-plugin-transform-es3-property-literals',
    ],
  }],
},

＆＃34;变换ES3构件表达-文字＆＃34;在webpack 1.x中的用法

2 个答案: