zoukankan      html  css  js  c++  java
  • [Tools] Target specific browsers with babel-preset-env and the babel pollyfill (browserslist)

    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'
      }
    })
  • 相关阅读:
    Android 在资源文件(res/strings.xml)定义一维数组,间接定义二维数组
    Android 设计模式之MVC模式
    Android Studio 1.0首次安装遇到的问题,无法下载SDK
    android 项目中规范使用SharedPreferences
    Android 在布局容器中动态添加控件
    Android ble 蓝牙4.0 总结一
    Mac Android签名生成keystore
    Android ndk 加载简单的gif 图像
    Android EventBus
    c语言内存
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10559695.html
Copyright © 2011-2022 走看看