强制 Webpack 在 react-app bundle 中使用 ES6 语法

Question

我的目标是在我构建的整个 react-app 中使用 `ES6` 语法（或最新的语法）。

我已经设法通过省略一些 babel 依赖项（例如 @babel/preset-env）来避免在我自己的代码中使用 polyfill。

然而，我的捆绑文件在大多数情况下确实包含 ES5 语法。我假设 babel（或 webpack？）是 polyfilling react 和 webpack 的 runtime 到 ES5 以实现浏览器兼容性。

另一种选择可能是 webpack 的运行时本机应该使用 ES5 并且不能转换为 ES6（当前持续的可能性，请参阅答案）。

这是我的 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" ]
  }

这是我的 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" })
  ],
};

我没有使用 create-react-app，而是我自己的样板和配置。

我的 index.js、app.js、index.html、styles.css 都在 ./src 文件夹中。

感谢您的帮助

Answer 1

如果您没有使用 @babel/preset-env，那么默认情况下您的代码不应更改。只有 React 应该被转译为 es5（主要是 JSX 转译）。你可能提到了 webpack 添加的样板代码，它可以在 es5 中。

您可以在您的 webpack 配置中使用 optimization: { minimize: false }，以便更好地查看您的包。

webpack 的这些样板文件称为 runtime。

没有办法强制 webpack 使用一组功能，但你可以强制它不使用一组抛出的功能 output.environment.*。例如，对于下面的代码，您说的是不要在运行时代码中使用 const。

...

output: {
    environment: {
        const: false
    }
}
...

强制 Webpack 在 react-app bundle 中使用 ES6 语法

Force Webpack to use ES6 syntax in react-app bundle

javascript

reactjs

webpack

babeljs

babel-polyfill

我的目标是在我构建的整个 react-app 中使用 `ES6` 语法（或最新的语法）。

强制 Webpack 在 react-app bundle 中使用 ES6 语法

Force Webpack to use ES6 syntax in react-app bundle

javascript

reactjs

webpack

babeljs

babel-polyfill

我的目标是在我构建的整个 react-app 中使用 ES6 语法（或最新的语法）。

我的目标是在我构建的整个 react-app 中使用 `ES6` 语法（或最新的语法）。