C/C++教程

【学习打卡】第8天 babel + webpack

本文主要是介绍【学习打卡】第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 不行

这篇关于【学习打卡】第8天 babel + webpack的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!