Передо мной стояла задача сделать одно из мобильных приложений, написанных на React, совместимым с Opera Mini в экстремальном режиме. Во время тестирования я узнал, что ничего из кода реакции там не работает, однако, включив этот babel-polyfill перед файлом main.js
он действительно работает.
Я пытался включить его в Webpack, чтобы код действительно конвертировался вместо включения огромной библиотеки, но безуспешно.
package.json
файл
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/plugin-proposal-class-properties": "^7.10.1",
"autoprefixer": "^8.6.3",
"babel-loader": "^8.0.6",
"copy-webpack-plugin": "latest",
"css-loader": "latest",
"file-loader": "latest",
"html-webpack-plugin": "latest",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "latest",
"postcss-loader": "latest",
"sass-loader": "latest",
"style-loader": "latest",
"url-loader": "latest",
"webpack": "latest",
"webpack-cli": "latest",
"webpack-dev-server": "latest"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0"
}
.babelrc
файл:
{
"presets": ["@babel/env", "@babel/react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
webpack.config.js
файл:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "index.html",
});
module.exports = {
output: {
publicPath: "/",
filename: "js/main.[hash:8].js",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.(png|jpg|gif|ico|svg|eot|ttf|woff|woff2)$/,
loader: "url-loader",
options: {
limit: 25000,
outputPath: "assets/",
name: "[name].[hash:8].[ext]",
},
},
{
test: /\.(scss|sass|css)$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
"css-loader",
"postcss-loader",
"sass-loader",
],
},
],
},
resolve: {
extensions: [".js", ".jsx", ".json"],
},
plugins: [
htmlPlugin,
new MiniCssExtractPlugin({
filename: "css/style.[hash:8].css",
}),
],
devServer: {
historyApiFallback: {
rewrites: [{ from: /^\/$/, to: "/index.html" }],
},
},
};
Как их можно изменить, чтобы мне не нужно было включать весь babel-polyfill.min.js
, а Webpack + babel фактически преобразовали код для работы?
--ИЗМЕНИТЬ
У меня был успех со следующими изменениями:
package.json
файл
...
"browserslist": [
"dead"
],
...
.babelrc
файл:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry",
"corejs": 3
}
],
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
[
"@babel/transform-runtime",
{
"corejs": 3
}
]
]
}
webpack.config.js
файл:
...
entry: "./src/index.js",
...
Как только эта настройка будет установлена, я должен вручную включить import "core-js";
в начало каждого файла, который является частью проекта, например:
- index.js
- App.js
- компоненты /events.jsx
- компоненты /popup.jsx
- и так далее...
есть ли способ избежать этого включения с помощью какой-либо конфигурации в webpack
или babel
? (я пробовал "useBuiltIns": "usage"
вместо entry
, но он не включает все необходимые полифилы)