我的目標是ES6在我構建的整個 react-app 中使用語法（或最新的）。
我已經設法通過省略一些 babel 依賴項（例如@babel/preset-env）來避免在我自己的代碼中使用 polyfill 。
然而，我的捆綁檔案在大多數情況下確實包含ES5語法。我假設 babel（或 webpack？）正在將 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.js, app.js, index.html,styles.css都在./src檔案夾中。
謝謝你的幫助
uj5u.com熱心網友回復：
如果您不使用，@babel/preset-env那么默認情況下您的代碼不應更改。只有 react 應該被轉譯為 es5（主要是 JSX 轉譯）。你可能提到了 webpack 添加的樣板代碼，它可以在 es5 中。
您可以optimization: { minimize: false }在 webpack 配置中使用，以更好地查看您的包。
webpack 的這些樣板檔案稱為runtime。
沒有辦法強制 webpack 使用一組功能，但您可以強制它不使用一組功能 throw output.environment.*。例如，對于下面的代碼，您說不要const在運行時代碼中使用。
...
output: {
environment: {
const: false
}
}
...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/400846.html