如何避免在 react-app 的生产版本中使用 polyfill

Question

My aim would be to keep ES6 syntax (or latest one) in my react-app built .

I've already managed to avoid polyfills on my dev-environment by removing some babel dependencies (such as @babel/preset-env and more). I've noticed that production built uses var keyword and other ES5 syntax. I'm assuming that babel (or webpack ?) is polyfilling my react-app. I've tried removing babel completely, but it is necessary for React : it is apparently used to convert jsx to vanilla js . Could I keep only required polyfill and ommit all others?

Here is my package.json :

  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode=development --open",
    "build": "webpack --mode=production"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.16.5",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.2"
  },
  "babel": {
    "presets": [ "@babel/preset-react" ]
  }

and here is my webpack.config.js :

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "[name].js"
  },
  resolve: {
    modules: [ path.join(__dirname, "src"), "node_modules" ],
    alias: {
      react: path.join(__dirname, "node_modules", "react")
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({ template: "./src/index.html" })
  ],
};

I am not using create-react-app but my own boilerplate and configuration.

My index.js , app.js , index.html , styles.css are into the ./src folder.

Please note that I have looked other questions but none satisfy my needs.

Thanks

Answer 1

You don't need to disable babel. If your only concerns are polyfills there is useBuiltIns option that you can configure for babel so it doesn't use polyfills at all.

If you want to use es6 syntax then you can use targets option. For example setting targets: 'defaults, not ie 11, not ie_mob 11' doesn't use var instead of const anymore.