提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

[Tools] Target specific browsers with babel-preset-env and the babel pollyfill (browserslist)

The and with tools Target babel ENV specific
2023-09-14 09:00:49 时间

Converting all of our modern JavaScript into ES5 compatible syntax is a great way to use modern features while targeting older browsers. What happens when the browsers natively support these language features? Then it no longer makes sense to transform that code or to include polyfills that will go unused. In this lesson, we’ll add the @babel/polyfill package and configure babel-preset-env

 

To reduce the polyfill size, we can targeting morden browser by using browserlist:

webpack.config.base.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: [['@babel/preset-env', {
            targets: [
              'last 2 versions',
              'not dead',
              'not < 2%'
            ],
            useBuiltIns: 'entry'
          }], '@babel/preset-react'],
          plugins: [
            'react-hot-loader/babel',
            '@babel/plugin-proposal-class-properties'
          ]
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin({
    template: './src/index.html'
  })]
}

 

You can see the supported browserlist by running:

npx browserlist "last 2 versions, not dead, not < 2%"

It will return a llst of supported browsers.

 

Together with bundler-analyser we can see the bundle size:

webpack.config.prod.js

const merge = require('webpack-merge')
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
const baseConfig = require('./webpack.config.base')

module.exports = merge(baseConfig, {
  mode: 'production',
  plugins: [new BundleAnalyzerPlugin({
    analyzerMode: 'static',
    openAnalyzer: false,
    reportFilename: 'bundle_sizes.html'
  })],
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  }
})

 

相关文章