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'
      }
    })
  • 相关阅读:
    170322操作系统定义、功能、位置与历史
    java 多线程
    java 网络编程TCP程序设计
    java 事件处理机制
    java GUI编程
    170321php3第4章 PHP5的基本语法+作业九九乘法表
    170320网络编程 udpclient udpGroupClient
    二叉树线索化
    哈希表
    二叉搜索树
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10559695.html
Copyright © 2011-2022 走看看