output path 和 devServer

output

  1. path：打包文件输出位置
  2. publicPath：html 中引入资源文件路径

devServer：

  1. contentBase：用于配置提供额外静态文件内容的目录
  2. publicPath：打包生成的静态文件所在目录

legacy [‘@babel/plugin-proposal-decorators’, { legacy: true }]

legacy 表示 stage1 的提案

loose [‘@babel/plugin-proposal-class-properties’, { loose: true }]

loose 为 true，则属性为 this.x = ‘bar’ 赋值属性，如果为 false， 则为 Object.defineProperty 赋值

preset-env

默认只转 js 语法，Promise，Set，Map 等不转

  1. presets: [
  2.     [
  3.       '@babel/preset-env',
  4.     {
  5.         useBuiltIns: 'usage',                        // 按需加载 polyfill
  6.       corejs: {
  7.           version: 3,                                        // 指定 corejs 版本号， 2 或者 3
  8.       },
  9.       targets: {                                            // 兼容浏览器版本
  10.           chrome: '60',
  11.         firefox: '60',
  12.         ie: '9',
  13.         safari: '10',
  14.         edge: '17'
  15.       }
  16.     }
  17.   ]
  18. ]

require(‘babel/polyfill’) 可以编译 Promise 等，缺点是太大了，400多K

useBuiltIns 属性

@babel/preset-env 默认开启语法转换，需要开启 useBuiltIns 才能转化 API 和 实例方法

  1. 最新 ES 语法：箭头函数
  2. 最新 ES API：Promise，Set，Map
  3. 最新 ES 实例方法：String.prototype.includes ```

  4. false: 不对 polyfille 操作，如果引入 @babel/polyfill，则引入所有 polyfill

  5. entry: 引入浏览器不兼容的 polyfill，需要在入口文件手动添加 import ‘@babel/polyfill’，会自动根据 browserslist 替换成浏览器不兼容的所有 polifill 如果指定 corejs: { version: 3 } 的话，则需要把 import ‘@babel/polyfill’ 替换成 import ‘core-js/stable’ 和 import ‘regerator-runtime/runtime’

  6. usage: 会根据配置的浏览器兼容，以及用到的 API 实现按需加载 ```

polyfill-service

最佳方案，自动化的Javascript Polyfill 服务
实现原理：通过分析请求头中 UserAgent 字段自动加载浏览器所需的 polyfill

<script src="https://polyfill.io/v3/polyfill.min.js" />