ядро babel 7.4.4, по умолчанию используются все полифиллы

Передо мной стояла задача сделать одно из мобильных приложений, написанных на 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, но он не включает все необходимые полифилы)


person Mevia    schedule 08.07.2020    source источник


Ответы (1)


Я собирался предложить вам отказаться от babel-polyfill, так как он устарел с версии 7.4.0, но затем увидел ваше редактирование.

Если вы хотите избежать импорта core-js везде, вам следует использовать "useBuiltIns": "usage".

Я думаю, что причина, по которой он не выполняет полифиллы, заключается в том, что ваш запрос списка браузеров не соответствует Opera Mini в соответствии с (https://browserl.ist/?q=dead), вы должны указать его, например:

...
"browserslist": [
  "dead",
  "op_mini all"
],
...
person Herz3h    schedule 08.07.2020
comment
к сожалению, нет, я уже пытаюсь включить многие вещи в browserslist, конечно, все, что связано со старыми и ограниченными браузерами, и это все еще не работает, в журнале отладки вы можете видеть, что он почти не включает полифиллы, в отличие от того, когда вы указываете entry вместо этого - person Mevia; 08.07.2020
comment
Я могу добавить, что браузер, с которым я работаю, Opera mini 4.5 выпущен в 2007 и работает на таких устройствах, как Sony Ericsson k800i. - person Mevia; 08.07.2020