zoukankan      html  css  js  c++  java
  • Babel原理

    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-plugin-transform-runtime
     
    二 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代码
     
    四 babel功能:
    1. polyfill:对部分新语法shim支持;
    2. DSL转换:比如解析JSX语法;
    3. 语法转换(将高级语法解析为当前可用的实现);
     
     
     
     

  • 相关阅读:
    Js获取URL中的QueryStirng字符串
    GridView分页操作
    c语言string的函数
    char *a 与char a[] 的区别
    htonl(),htons(),ntohl(),ntons()--大小端模式转换函数
    nfs 原理详解
    NFS和mount常用参数详解 本文目录
    网络安全过滤软件
    SNMP协议详解
    win7开启snmp服务
  • 原文地址:https://www.cnblogs.com/terrymin/p/14803088.html
Copyright © 2011-2022 走看看