gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 05:50:16 25 4
gpt4 key购买 nike

<分区>

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

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

不过,我的捆绑文件在很大程度上保留了 ES5 语法。我假设 babel(或 webpack?)是 polyfilling react 和 webpack 的 runtimeES5 以实现浏览器兼容性。

另一种选择可能是 webpack 的运行时 native 应该使用 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 文件夹。

谢谢你的帮助

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com