你好,babel

简介: 你好,babel

写在前面

其实学babel是本人2019年Q3的一个计划,因为当时自己做的一个项目需要自己去配babel,也遇到了一些困难,发现自己对babel的了解还是很少的,所以决定好好看下babel;可是后来解决了当时的问题后,由于业务需求很多再加上自己懒了(这才是最终的原因),学习babel的事也就不了了之了。。。拖到了现在0.0

已经进入2020年了,还没有来得及总结自己的19年,但是2020年我要立下一个早该做到的flag,今年的Q1本人要彻底搞懂babel,也不说彻底搞懂啦,最起码本人要做到团队所有的babel问题我都可以直接解决。

其实我也不是为了搞懂babel而想着去学,我最近也看了一些关于babel的博客,慢慢的发现babel其实很有意思,去研究一个东西对自己的技术成长也会有提升,话不多说学就完了,奥利给!

对babel的基本理解

其实在学babel之前我也做了一些功课,对babel也有一些基本的理解,我先基本的谈谈我对最基本的理解

babel是什么?

babel就是一个转换器,它可以把高阶ES2015+版本的代码转换成浏览器可以解析的代码(向后兼容)。

为什么要用babel?

本人是做前端的,主要就是在用js,js版本也是一年比一年在更新,每次更新都会出一些更方便好用的方法,到现在ECMAScript已经到了ES10了,已经迭代了10个版本;不过现在多数浏览器支持的主流js语言是ES2014语法,有很多对ES2015以及ES2015+的一些语法是不支持的,也就是你用这些语法有部分浏览器是不支持的,就会报错。

但是高阶语法就是很方便啊,我就是想用,怎么办?这个时候为什么要用babel就很明显了,就是用它来把ES2015+的语法编译成浏览器能识别的通用语言,举个最简单的例子:

// babel编译前,ES2015箭头函数
(n) => { return n + 1 }
// babel编译后,ES2014函数
function (n) { return n + 1 }

babel如何工作的?

看了一些关于babel的博客,我觉得babel就是一个插件集合,里面有一个个的插件。

babel将代码解析成AST(抽象语法树),然后用一个个对应的插件修改AST,将修改好的AST输出。

babel的一些其他的特性

babel默认是只会去转义js语法的,不会去转换新的API,比如像Promise、Generator、Symbol这种全局API对象,babel是不会去编译的;

这个时候就需要使用babel的babel-polyfill或者babel-runtime库 和 babel-plugins-transform-runtime插件结合使用按需添加polyfill。

写在最后

本人现在学习一门技术分三步(以这次学习babel为例):

  1. 先看关于babel的博客文章,对babel有个基本的认知;
  2. 列下babel学习目录思维导图;
  3. 对着自己列的思维导图把babel文档过一遍;
  4. 去了解babel究竟是如何把高阶语法编译成浏览器能识别的语法的。

我对自己学一门技术的步骤有点疑问,总感觉这样去学效率不高,总感觉哪里有点不对,但我也说不上来哪点不对,如果谁有建议什么的还望提给我,抱拳了


在最后列下我自己学习babel的目录脑图,我将开启我的babel学习之旅。


2020年,加油!

相关文章
|
存储 运维 监控
Seata-微服务架构开发的必备利器
Seata 是一款开源的分布式事务解决方案,致力于在微服务架构下提供高性能和简单易用的分布式务服务,于 2019 年 1 月正式开源。 目前有四种事务模式,分别是 AT 事务模式(阿里独创)、 TCC事务模式、XA 事务模式以及 Saga 事务模式,基本囊括了市面上大部分事务模式,可以成为是一个一站式的分布式事务解决方案。
Seata-微服务架构开发的必备利器
|
存储 缓存 NoSQL
分布式架构下 Session 共享的方案
【10月更文挑战第15天】在实际应用中,需要根据具体的业务需求、系统架构和性能要求等因素,选择合适的 Session 共享方案。同时,还需要不断地进行优化和调整,以确保系统的稳定性和可靠性。
578 55
|
10月前
|
人工智能 自然语言处理 算法
完全开源的代码大模型OpenCoder来了,跻身性能第一梯队
在人工智能领域,大型语言模型(LLM)尤其在代码生成等任务中展现出巨大潜力。然而,高质量、可复现的开源代码LLM仍稀缺。为此,多领域专家团队推出了OpenCoder,一个顶级开源代码LLM。它不仅性能卓越,还提供了完整的数据处理流程和训练协议,确保研究的可复现性。OpenCoder的开放性为研究社区提供了从数据准备到模型训练的全流程指导,成为推动代码AI领域发展的关键工具。论文链接:https://arxiv.org/abs/2411.04905
457 91
|
前端开发 JavaScript Linux
十年跨平台开发,Electron 凭什么占据一席之地?
本文首发于微信公众号“前端徐徐”。作者徐徐将系统整理Electron的相关知识,分享更多开发经验。Electron是一个已有10年历史的跨端开发框架,本文将从其诞生背景、优劣势、生态、案例等方面进行详细介绍,并与其他框架进行对比,帮助读者全面了解Electron。
789 2
十年跨平台开发,Electron 凭什么占据一席之地?
|
存储 Kubernetes 调度
Flink 批作业如何在 Master 节点出错重启后恢复执行进度?
本文由阿里云研发工程师李俊睿撰写,介绍了Flink 1.20版中新引入的批作业进度恢复功能。文章涵盖背景、解决思路、使用效果及启用方法。此前,若JobMaster故障,批作业需重头开始,造成进度丢失。新功能通过将JM状态持久化至外部存储并在故障后利用这些状态恢复作业进度,避免了这一问题。使用该功能需启用集群高可用并配置相关参数。
464 7
Flink 批作业如何在 Master 节点出错重启后恢复执行进度?
|
网络协议 算法 数据库
OSPF 与 BGP 的互操作性:构建复杂网络的通信桥梁
OSPF 与 BGP 的互操作性:构建复杂网络的通信桥梁
449 0
|
Windows
MyKeymap按键映射工具
MyKeymap能减少键鼠切换、实现全键盘操作,让「编辑文字」和「窗口管理」更快捷。提升工作学习中写代码、编辑文字、整理笔记、管理窗口的效率,掌握MyKeymap后,能让使用Windows的日常,拥有流畅、舒适、顺滑的操作体验。
438 2
MyKeymap按键映射工具
|
运维 Kubernetes 监控
kubernetes 安装cilium
Cilium是一个开源软件,用于透明地提供和保护使用Kubernetes,Docker和Mesos等Linux容器管理平台部署的应用程序服务之间的网络和API连接。 Cilium基于一种名为BPF的新Linux内核技术,它可以在Linux内部动态插入强大的安全性,可见性和网络控制逻辑。 除了提供传统的网络级安全性之外,BPF的灵活性还可以在API和进程级别上实现安全性,以保护容器或容器内的通信。由于BPF在Linux内核中运行,因此可以应用和更新Cilium安全策略,而无需对应用程序代码或容器配置进行任何更改。
1127 1
|
SQL 分布式计算 关系型数据库
Clickhouse时间日期函数一文详解+代码展示
Clickhouse时间日期函数一文详解+代码展示
3801 0
Clickhouse时间日期函数一文详解+代码展示
|
网络协议 网络安全 数据安全/隐私保护
SiteGround搭建WordPress
本文将带你快速使用SiteGround搭建WordPress网站,与使用VPS搭建WordPress相比,使用SiteGround明显更加轻松,因为它无需写代码就能实现。本教程教程内容涵盖了购买域名、SiteGround服务器购买、域名DNS解析配置,以及SSL证书生成,帮助你迅速建立一个完整可用的WordPress网站。
818 0
SiteGround搭建WordPress