babel-preset-env没有使用webpack转换箭头函数 [英] babel-preset-env not transpiling arrow functions using webpack

问题描述

我正在使用带有webpack的babel，我正在尝试使用Internet Explorer处理箭头功能，但我无法使其正常工作。

I'm using babel with webpack, I'm trying to make arrow functions work with Internet Explorer, but I can't get it working.

这是我的 package.json 开发依赖项：

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "webpack": "^3.12.0",
    "webpack-cli": "^3.1.0"
  }

这是我的webpack.config.js：

and this is my webpack.config.js:

module.exports = {
  entry: ['./chat.js'],
  devtool: 'source-map',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "chat.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }  
};

我正在使用 .babelrc的插件：

{
  "presets": ["env"],
  "plugins": ["transform-class-properties"]
}

我不知道我做错了什么，或者我是不是我错过了一些东西，但我在Internet Explorer上遇到以下语法错误：

I don't know what I'm doing wrong or if I'm missing something but I get the following syntax error on Internet Explorer:

DF.fn = () => {
        // Content
};

推荐答案

如果您使用的是Babel 7，则行为 .babelrc 已经改变了。

If you are using Babel 7, the behaviour of .babelrc has changed.

我的建议是放弃 .babelrc 并将配置放在你的webpack配置中。

My advice is to drop .babelrc and put the config inside your webpack config.

此外，您需要从配置配置中删除 exclude：/ node_modules / ，或在某些条件下添加不排除使用浏览器不兼容代码的任何库（例如，如果你想使用IE浏览器，则为箭头函数）。

Additionally you will need to either remove exclude: /node_modules/ from your config config, or add in some conditions for not excluding any libraries that use browser incompatible code (eg, arrow functions if you want to use IE).

我个人删除 exclude 完全没有注意到速度或尺寸没有降级。

Personally I removed the exclude altogether and noticed no degredation in speed or size.

这篇关于babel-preset-env没有使用webpack转换箭头函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！