javascript - babel-preset-env not transpiling arrow functions using webpack - Stack Overflow

admin管理员组

文章数量:1344929

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

This is my package.json dev dependencies:

"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"
  }

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/
      }
    ]
  }  
};

I'm using the plugins with .babelrc:

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

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
};

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

This is my package.json dev dependencies:

"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"
  }

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/
      }
    ]
  }  
};

I'm using the plugins with .babelrc:

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

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
};

• javascript
• webpack
• babeljs

Share Improve this question Follow edited Aug 3, 2018 at 12:26 Tim Diekmann 8,4861111 gold badges4848 silver badges7272 bronze badges asked Aug 3, 2018 at 9:25 David del PuertoDavid del Puerto 10111 silver badge44 bronze badges 1

• You need a polyfill for it. Core-js or babel-polyfill can do the job. – Dimitar Commented Aug 3, 2018 at 9:45

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

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

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 inpatible code (eg, arrow functions if you want to use IE).

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

For those using Webpack 5, you need to specify the features that you want to transpile in the ouput.environment configuration, as explained here: https://webpack.js/configuration/output/#outputenvironment.

I am using differential serving so I have set all the flags according to a modern variable (which is set to true only if building for recent browsers, which is the last 5 versions of Chrome and Firefox and the last 2 versions of Safari, Edge and iOS).

output: {
  // ... other configs
  environment: {
    arrowFunction: modern,
    bigIntLiteral: modern,
    const: modern,
    destructuring: modern,
    dynamicImport: modern,
    forOf: modern,
    module: modern,
  },
}

You have to specify the target browsers for your build. Based on that babel-preset-env decides which transforms need to be applied. Here's docs and example of config

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

And here are all possible ways to specify the browsers set.

本文标签： javascriptbabelpresetenv not transpiling arrow functions using webpackStack Overflow