登录免费注册



Babel

首页  思维导图  详情



Babel

2021-12-04 12:07:29   0  举报





AI智能生成

Babel学习

前端开发

babel

面试

模版推荐

作者其他创作

大纲/内容

是什么

<font color="#1b5e20">Babel 是一个工具链，</font><br>主要用于在当前和旧的浏览器或环境中，<br>将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码。<br>

怎么实现的

<ol><li>Babel 先将源码转换为 AST(抽象语法树)</li><li>遍历AST，对树做一些修改</li><li>然后再将AST转成code，即成源码</li></ol>

babel 的中文文档翻译很垃圾，要对比英文文档看

设计与组成（也就是架构）<br>

核心

@babel/core

周边

@babel/cli

可在 cmd 终端执行 babel 命令

@babel/plugin-*

插件

@babel/preset-*

插件集合

@babel/plofill

<b>This will emulate a full ES2015+ environment (no < Stage 4 proposals) <br>and is intended to be used in an application rather than a library/tool. </b><br>(this polyfill is automatically loaded when using babel-node).<br>

@babel/runtime

注意事项

目的

避免编译输出的重复问题

为代码创建沙盒环境

babel-plugin 与 babel-prest

presets 是一组插件的集合

最常用到的插件

@babel/preset-env

加载顺序

参考

https://mp.weixin.qq.com/s?__biz=MzAwOTkzNDc0Mg==&mid=2247483745&idx=1&sn=3ad02c5981127907840a3c3c9d0fb86c&chksm=9b594398ac2eca8e5b5c8473ae617e49e968d9b75db8242512ad0df6d4b6e8ad1d5aef9b9d86#rd

Babel 官方中英文文档

拉勾大前端课程

 Collect

Get Started

Webpack

 Collect

Get Started

前端工程化

 Collect

Get Started

前端推荐系统架构图

10.webpack 和 babel

 Collect

Get Started

10.webpack 和 babel













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document