【学习打卡】第8天 babel + webpack-原创手记-慕课网

课程名称：前端框架及项目面试聚焦 Vue3/React/Webpack
课程章节：第 10 章 webpack 和 babel
主讲老师：双越

课程内容：

今天学习的内容包括：
10-21 babel 基本概念串讲
10-22 babel-polyfill 是什么
10-24 babel-runtime 是什么
这几节主要是 babel 讲解，后续几节主要是复习和面试题

课程收获：

大概复述一下

babelrc 配置

preset：常用 plugin 集合
@babel/preset-env ES6
@babel/preset-flow
@babel/preset-react 解析 jsx 语法
@babel/preset-typescript 解析 ts 语法

{
  "presets": [
    [
      // 常用 plugin 集合
      "@babel/preset-env",
      // babel-polyfill 按需引入
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": 3,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

babel-polyfill

polyfill: 低版本实现 ES 高版本新语法。
以下两者集合：
corejs 库：除了 generator 外，ES 高版本 polyfill 集合
regenerator：generator 函数的 polyfill
babel 不处理模块化，不处理 promise

polyfill 本身比较大，按需引入

  {
    "useBuiltIns": "usage",
    "corejs": 3
  }

polyfill 缺陷

可以作为独立的 web 系统没问题，但作为三方库会污染全局环境
污染全局环境：
window.Promise = function() {//…}
不污染全局环境：
window._Promise = function() {//…}

babel-runtime 解决污染全局

安装：
dependencies “@babel/runtime”: "^7.7.5"
devDependencies “@babel/plugin-transform-runtime”: “^7.7.5”,

为何要打包

tree-shaking 压缩合并后体积更小，加载更快
能编译高级语法（Ts, Es6, 模块化， scss）
兼容性和错误提示（Polyfill, postcss, eslint）
统一高效开发环境
同意构建流程产出标准
集成公司构建规范

loader plugin 区别

loader 模块转换器 eg. less-loader less 转 css, babel-loader
plugin 扩展插件 DefinePlugin htmlWebpackPlugin

babel 和 webpacK 区别

babel-js 新语法编译工具，不管模块化
webpack 打包工具，多个 loader\ plugin 集合

产出 lib

output: {
  // lib 文件名
  filename: '',
  // 输出 lib 到 dist 目录下
  path: distPath,
  // lib 全局变量名
  library: 'loadsh'
}

proxy 不能被 Polyfill

function 模拟 class，callback 模拟 Promise
proxy 没法模拟，Object.defineProperty 不行
图片描述