Babel.js 强制Webpack在react-app捆绑包中使用ES6语法[duplicate]

guykilcj  于 2022-12-08  发布在  Babel
关注(0)|答案(1)|浏览(182)

此问题在此处已有答案

Use Webpack to output es6?(2个答案)
8个月前关闭。

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

我已经设法通过省略一些babel依赖项(如@babel/preset-env)来避免在我自己的代码中使用多边形填充。
不过我的捆绑文件大部分都是ES5语法,我假设babel(或者webpack?)是polyfilling react,webpack的运行时间是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.jsapp.jsindex.htmlstyles.css都在./src文件夹中。
谢谢你的帮助

eni9jsuy

eni9jsuy1#

如果你没有使用@babel/preset-env,那么你的代码在默认情况下不应该改变。只有react应该被移植到es5(主要是JSX移植)。你可能提到了webpack添加的样板代码,它可以在es5中。
您可以在webpack配置中使用optimization: { minimize: false },以便更好地查看您包。
Webpack提供的这些样板文件称为runtime
没有办法强制webpack使用一组特性,但是你可以强制它使用output.environment.*抛出的一组特性。例如,在下面的代码中,你说不要在运行时代码中使用const

...

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

相关问题