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'
      }
    })
  • 相关阅读:
    取消PHPCMS V9后台新版本升级提示信息
    phpcmsv9全站搜索,不限模型
    jq瀑布流代码
    phpcms v9模版调用代码
    angular.js添加自定义服务依赖项方法
    angular多页面切换传递参数
    angular路由最基本的实例---简单易懂
    作用域事件传播
    利用angular控制元素的显示和隐藏
    利用angular给节点添加样式
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10559695.html
Copyright © 2011-2022 走看看