你好,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年,加油!

相关文章
|
存储 缓存 NoSQL
分布式架构下 Session 共享的方案
【10月更文挑战第15天】在实际应用中,需要根据具体的业务需求、系统架构和性能要求等因素,选择合适的 Session 共享方案。同时,还需要不断地进行优化和调整,以确保系统的稳定性和可靠性。
763 55
|
Oracle Java 关系型数据库
Java 又双叒叕发布新版本,这么多版本如何灵活管理?
不知不觉 JDK13 发布已有两个月,不知道各位有没有下载学习体验一番?每次下载安装之后,需要重新配置一下 Java 环境变量。等到运行平时的项目又需要切回之前 JDK 版本,这又需要重新环境变量。这么重复配置显然非常低效,又不能灵活切换版本。 所幸通过万能 Google 找到解决方案,使用 jenv 管理 JDK 版本。
Java 又双叒叕发布新版本,这么多版本如何灵活管理?
|
前端开发 JavaScript Linux
十年跨平台开发,Electron 凭什么占据一席之地?
本文首发于微信公众号“前端徐徐”。作者徐徐将系统整理Electron的相关知识,分享更多开发经验。Electron是一个已有10年历史的跨端开发框架,本文将从其诞生背景、优劣势、生态、案例等方面进行详细介绍,并与其他框架进行对比,帮助读者全面了解Electron。
1320 2
十年跨平台开发,Electron 凭什么占据一席之地?
|
Ubuntu 关系型数据库 MySQL
利用阿里云镜像在ubuntu上安装Docker
利用阿里云镜像在ubuntu上安装Docker
6330 1
利用阿里云镜像在ubuntu上安装Docker
|
弹性计算 移动开发 固态存储
阿里云域名优惠券68元、36元和26.2元代金券一键领取中.......
阿里云域名优惠券68元、36元和26.2元代金券一键领取中,阿里云com域名注册69元一年,企业新用户可领取68元代金券,券后注册com域名首年只要1元;个人新用户可以领取36元代金券,券后注册com域名33元首年;新用户可以领取cn域名26.2元代金券,券后注册cn域名首年只要8.8元
886 0
阿里云域名优惠券68元、36元和26.2元代金券一键领取中.......
|
API 文件存储
使用Streamlit创建AutoGen用户界面
AutoGen作为一个最大化LLM(如GPT-4)能力的框架而脱颖而出。由微软研究院开发的AutoGen通过提供一种自动化、优化和编排工作流的方法,简化了复杂的、基于多代理llm的应用程序的创建。我们在以前的文章中也有过介绍,你可以与许多GPT交谈,并且GPT和GPT之间也可以互相交谈。每个GPT都是它自己的“代理”,并在总体业务流程中扮演特殊角色。但是AutoGen是用命令行模式进行交互的,这对我们的输入来说非常不方便,所以这次我们来对其进行改造,使用Streamlit创建一个web界面,这样可以让我们更好的与其交互。
809 1
|
存储 运维 监控
Seata-微服务架构开发的必备利器
Seata 是一款开源的分布式事务解决方案,致力于在微服务架构下提供高性能和简单易用的分布式务服务,于 2019 年 1 月正式开源。 目前有四种事务模式,分别是 AT 事务模式(阿里独创)、 TCC事务模式、XA 事务模式以及 Saga 事务模式,基本囊括了市面上大部分事务模式,可以成为是一个一站式的分布式事务解决方案。
Seata-微服务架构开发的必备利器
|
网络协议 算法 数据库
OSPF 与 BGP 的互操作性:构建复杂网络的通信桥梁
OSPF 与 BGP 的互操作性:构建复杂网络的通信桥梁
683 0
|
存储 Kubernetes 调度
Flink 批作业如何在 Master 节点出错重启后恢复执行进度?
本文由阿里云研发工程师李俊睿撰写,介绍了Flink 1.20版中新引入的批作业进度恢复功能。文章涵盖背景、解决思路、使用效果及启用方法。此前,若JobMaster故障,批作业需重头开始,造成进度丢失。新功能通过将JM状态持久化至外部存储并在故障后利用这些状态恢复作业进度,避免了这一问题。使用该功能需启用集群高可用并配置相关参数。
617 7
Flink 批作业如何在 Master 节点出错重启后恢复执行进度?
|
Windows
MyKeymap按键映射工具
MyKeymap能减少键鼠切换、实现全键盘操作,让「编辑文字」和「窗口管理」更快捷。提升工作学习中写代码、编辑文字、整理笔记、管理窗口的效率,掌握MyKeymap后,能让使用Windows的日常,拥有流畅、舒适、顺滑的操作体验。
551 2
MyKeymap按键映射工具

热门文章

最新文章

下一篇
开通oss服务