模块化五—babel原理与使用

一Babel基本概念：
 1 Babel：Babel 是一个 JavaScript 编译器。他把最新版的javascript编译成当下可以执行的版本，即 利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6，甚至es7的语法。
 2 babel功能：
  • 语法转换（将高级语法解析为当前可用的实现）
  • 源代码转换(codemods)
  • polyfill:对部分新语法shim支持（通过如 core-js 的第三方 polyfill）；
 
  1. babel-core：Babel编译器的核心，Babel默认只转换新的javascript句法，而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，因此，转换这些新的API需要一个垫片库polyfill。
  2. polyfill有三种：https://www.cnblogs.com/L-xmin/p/12493824.html
  • babel-polyfill：解决了Babel不转换新API的问题，但是直接在代码中插入帮助函数，会导致污染了全局环境，并且不同的代码文件中包含重复的代码，导致编译后的代码体积变大。
  • babel-runtime：babel-runtime就是一个提供了regenerator、core-js和helpers的运行时库。建议不要直接使用babel-runtime，因为transform-runtime依赖babel-runtime，大部分情况下都可以用transform-runtime达成目的。
  • babel-plugin-transform-runtime
4 Preset和Plugin：
Babel Preset视为Babel Plugin的集合。比如babel-preset-es2015就包含了所有跟ES6转换有关的插件。
  • 插件在 Presets 前运行。
  • 插件顺序从前往后排列。
  • Preset 顺序是颠倒的（从后往前）。
 
  1. 解析：
  • 词法分析：词法分析阶段把字符串形式的代码转换为 令牌（tokens） 流。
  • 语法分析：把一个令牌流转换成 AST 的形式。
  1. 转换：接收 AST 并对其进行遍历，在此过程中对节点进行添加、更新及移除等操作
  2. 生成：把最终（经过一系列转换之后）的 AST 转换成字符串形式的代码，同时还会创建源码映射（source maps）。
  3. Babel 使用 @babel/parser 解析代码，babel使用的是babylon进行解析 ==》 得到AST==》 plugin用babel-traverse对AST树进行遍历转译 ==》 得到新的AST树==》 用babel-generator通过AST树生成ES5代码
 
 

三 虚拟dom与Ast的区别：Vue中的AST与虚拟dom

抽象语法树（abstract syntax code，AST）：是源代码的抽象语法结构的树状表示。这里特指编程语言的源代码。它一般是在编译过程中出现的，但项目运行时就不再有 AST 的概念。AST抽象语法树

  • AST作用：编程语言太多，需要一个统一的结构让计算机识别。如typescript的类型检查，IDE的语法高亮，代码检查，转译，Babel对ES6代码转换等等，都是需要先将代码转化成AST在进行后续的操作。
  • AST的生成过程（编译）：词法分析（lexical analysis）=》tokenize=》语法分析（parse analysis） 
const fn = a => a;

 虚拟 DOM （Virtual DOM ）：是一个普通的 JavaScript 对象，包含了 tag、props、children 三个属性。虚拟 Dom 是在 render 过程中出现的，主要用于比较 render 前后的数据结构变化，然后再通过特定的render方法将其渲染成真实的DOM节点。虚拟dom

  • Virtual DOM 最大的优势在于抽象了原本的渲染过程，实现了跨平台的能力，而不仅仅局限于浏览器的 DOM，可以是安卓和 IOS 的原生组件，可以是近期很火热的小程序，也可以是各种GUI。
  • Virtual DOM 提升性能的点在于 DOM 发生变化的时候，通过 diff 算法比对 JavaScript 原生对象，计算出需要变更的 DOM，然后只对变化的 DOM 进行操作，而不是更新整个视图。 
<div id="app">
  <p class="text">hello world!!!</p>
</div>

上面的 HTML 转换为虚拟 DOM 如下：

{
  tag: 'div',
  props: {
    id: 'app'
  },
  chidren: [
    {
      tag: 'p',
      props: {
        className: 'text'
      },
      chidren: [
        'hello world!!!'
      ]
    }
  ]
}

 

 

 

 

 

 

 

posted @ 2022-03-11 10:57  TerryMin  阅读(291)  评论(0)  编辑  收藏  举报