本篇是根据最新babel 7版本写的,里面用到的一些babel相关包都是babel 7的
 
 
1,babel是如何工作的
babel是一个转译器,这里我严格区分了转译器和编译器,因为编译器最终生成的是机器指令,已经和最初的代码完全不一样了,而转译器只是将高级别的语言转化为低级别的语言,能更好的兼容,所以我把它称作转译器,仅仅做了转化。
 
babel的工作流程,简单来说,就是传入code字符串,经过一系列处理后,吐出code字符串,就像这样:   >Code => do something => Code
 
传统编译过程?(分词/词法分析,解析/语法分析AST,生成机器指令)
 
其实babel也类似,三个过程:解析,变换,再建
 
1,解析:
将代码字符串解析成AST(抽象语法树),在这一步里,babel会顺带进行语法的正确性校验
(关于这一步里,实际上就是编译器过程的第一二两步,生成AST的过程,具体的可参考之前的js编译原理那篇随笔)
 
2,变换:
遍历整个抽象语法树,对AST进行变换操作
 
3,再建:
再次递归遍历整个新的AST,根据变换后的AST再生成代码字符串
 
而我们在配置文件中写的 presets 和 plugins 就是在第二阶段 变换 过程中使用的
2,plugin是干嘛用的
plugin就是用在do something的时候,如果没有plugin,code还是原字符串返回,不作处理
plugin会运行在preset之前
plugin是从前往后,而preset是从后往前执行
3,presets是干嘛用的
preset是用来组合plugin的,无需我们手动安装很多plugin,而是提供了一组插件的集合(单点和套餐的区别)
比如我们用react的时候,我们就要添加@babel/preset-react,用ts的时候,就要添加@babel/preset-typescript
4,presets一些常见的配置项的功能及作用
env: 通过配置得知当前目标环境的特点,然后只做必要的转换,如果不写配置项,默认env为latest,也等价于es2015 + es2016 + es2017三个相加
5,其它一些相关的包
 
@babel/core
这个包里提供了很多代码转化的API,可以直接用里面的API对某一段代码进行转化,但是大部分情况我们不会手动调用,可是这个包确实必须要用的,因为其它的包会用到它。
@babel/preset-env
它是多个preset的集合,并且不断在更新,我们可以通过配置项来决定需要支持的平台(浏览器或者node平台,不同版本下),然后按需加载插件,如果不配置,默认情况下和babel-preset-latest等同,会加载从es2015开始的所有preset
@babel/register
每当使用 require 命令加载 .js, .jsx, .es, .es6 的后缀名文件时,会先用babel进行转码。
使用时必须先加载 require('@babel/register'),这个通常我们会在做服务端编译的时候,引入这个。
@babel/polyfill

从7.4版本开始,不推荐使用了,下面讲一下原因:
babel默认只转换js语法,不转换新的API,比如 Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, Promise 等全局对象,以及一些定义在全局对象上的方法,比如 Array.from, Object.assign ,如果想用这些方法,就必须使用 @babel/polyfill ,它内部集成了 core-js, regenerator
使用时必须在所有代码运行之前加 require('@babel/polyfill'),所以之前通常也是在服务端代码中加入这个。
 
 
缺点:
打出来的包非常大,因为它是一个整体,会一次性将所有的方法都加到原型链上,没用到的那些方法也会加上去,所以可以单独使用 core-js 的某个类库来解决
会污染全局变量,因为直接在原型上做修改
如何解决这些缺点?使用 @babel/plugin-transform-runtime 和 @babel/runtime
@babel/plugin-transform-runtime 和 @babel/runtime
简单来说,它能有效的减少重复代码,并且可以实现在需要进行转换的时候才转换,不会像 @babel/polyfill 那样一次性全部处理
使用时必须将 @babel/runtime 添加到 dependencies 中
那这样的话,谁还用 @babel/polyfill 呢,是否有场景是必须要用它,而 @babel/runtime 解决不了的呢?
有, 实例方法无法转码,如
 
'!!!'.repeat(3);
'hello'.includes('h');

  

 

但是那都是过去了!

@babel/runtime-corejs3 里提供了对实例方法的转码,所以不用使用babel-polyfill,使用的时候在@babel/plugin-transform-runtime里配置属性 corejs: 3

 
 
 
以上就是我在学习babel过程中觉得有价值的部分了,可能面试会遇到的这些问题,如果后续还看到有用的内容,会继续更新。
 
end

Babel知识点相关的更多相关文章

  1. React-Native知识点相关

    React-Native相关 一,为什么要使用React-native? Hybrird的首屏时间太慢,白屏太久,影响用户体验: 原生native开发成本较高: 这里补充一点Webview的性能优化: ...

  2. Java最重要的21个技术点和知识点之JAVA基础

     (一)Java最重要的21个技术点和知识点之JAVA基础  写这篇文章的目的是想总结一下自己这么多年JAVA培训的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能分享给刚刚入门的Ja ...

  3. Java最重要的21个技术点和知识点之JAVA面向对象

    (二)Java最重要的21个技术点和知识点之JAVA面向对象  写这篇文章的目的是想总结一下自己这么多年JAVA培训的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能分享给刚刚入门的J ...

  4. Java最重要的21个技术点和知识点之JAVA集合框架、异常类、IO

    (三)Java最重要的21个技术点和知识点之JAVA集合框架.异常类.IO  写这篇文章的目的是想总结一下自己这么多年JAVA培训的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能分享 ...

  5. Java最重要的21个技术点和知识点之JAVA多线程、时间处理、数据格式

    (四)Java最重要的21个技术点和知识点之JAVA多线程.时间处理.数据格式  写这篇文章的目的是想总结一下自己这么多年JAVA培训的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能 ...

  6. Java最重要的21个技术点和知识点

    (五)Java最重要的21个技术点和知识点之网络编程.泛型.编程规范相关 写这篇文章的目的是想总结一下自己这么多年JAVA培训的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能分享给刚 ...

  7. 给Java新手的一些建议----Java知识点归纳(Java基础部分)

    写这篇文章的目的是想总结一下自己这么多年来使用java的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能分享给刚刚入门的Java程序员和打算入Java开发这个行当的准新手们,希望可以给 ...

  8. 95%的技术面试必考的JVM知识点都在这,另附加分思路!

    概述:知识点汇总 jvm的知识点汇总共6个大方向:内存模型.类加载机制.GC垃圾回收是比较重点的内容.性能调优部分偏重实际应用,重点突出实践能力.编译器优化和执行模式部分偏重理论基础,主要掌握知识点. ...

  9. 给Java新手的一些建议——Java知识点归纳(Java基础部分)

    原文出处:CSDN邓帅 写这篇文章的目的是想总结一下自己这么多年来使用java的一些心得体会,主要是和一些Java基础知识点相关的,所以也希望能分享给刚刚入门的Java程序员和打算入Java开发这个行 ...

随机推荐

  1. linux之DNS主域,从域,缓存服务器的架设

    DNS主域,从域,缓存服务器的架设 DNS域名系统 组织域 顶级域  域名解析过程迭代递归 DNS(Domain Name System ) 在Internet中使用IP地址来确定计算机的地址. 为了 ...

  2. day17.json模块、时间模块、zipfile模块、tarfile模块

    一.json模块 """ 所有的编程语言都能够识别的数据格式叫做json,是字符串 能够通过json序列化成字符串与如下类型: (int float bool str l ...

  3. 包管理Go module的使用

    我用 Golang 的 Web 框架 Iris 写项目时,发现下载依赖老是失败原因是被墙了(可以参考上一篇 https://www.cnblogs.com/ser0632/p/11374790.htm ...

  4. 声明式事务xml Spring

    !--JDBC事务管理器--><bean id="tansactionManager" class="org.springframework.jdbc.dat ...

  5. 使用HttpClient 发送 GET、POST(FormData、Raw)、PUT、Delete请求及文件上传

    httpclient4.3.6 package org.caeit.cloud.dev.util; import java.io.File; import java.io.IOException; i ...

  6. 怎么在微信公众号上传PPT?

    我们都知道创建一个微信公众号,在公众号中发布一些文章是非常简单的,但公众号添加附件下载的功能却被限制,如今可以使用小程序“微附件”进行在公众号中添加附件. 以下是公众号添加附件使用“微附件”小程序的教 ...

  7. QT QMdiArea 添加背景或添加背景图片失效问题

    说起QMdirArea 这个控件与其他控件真所不同.... 这里记一下 我踩过的坑之一,,,,, QMdiArea 默认的背景 不符合我要求,,当时我就理所当然就想往常一样给它设置颜色 万万没想到.. ...

  8. Hyperledger Fabric 部署

    Hyperledger Fabric 部署 Hyperledger Fabric需要使用Docker.Go环境. Docker环境安装 Docker环境安装 直接查看这一篇,安装好之后将当前用户非ro ...

  9. 滴滴推理引擎IFX:千万规模设备下AI部署实践

    桔妹导读:「滴滴技术」将于本月开始,联合各技术团队为大家带来精彩分享.你想了解的技术干货,深度专访,团队及招聘将于每周三与你准时见面.本月为「滴滴云平台事业群分享月」,在今天的内容中,云平台事业群-机 ...

  10. Azure Application Gateway(二)对后端 VM 进行负载均衡

    一,引言 上一节有讲到使用 Azure Application Gateway 为我们后端类型为 Web App 的 Demo 项目提供负载均衡,Azure Application Gateway 的 ...