24. babel的安装和使用 - 《webpack》

babel简介

babel一次来源于希伯来语,直译为巴别塔

巴别塔象征着统一的国度,同一的语言,

而今的js世界缺少一座巴别塔,不同版本的浏览器能识别的es标准并不相同,就导致了开发者对不同的浏览器需要使用不同的语言,和古巴比伦一样,前端开发也面临着这样的困境

babel的出现,就是解决这样的问题的,它是一个编译器,可以把不同标准的标准书写的语言,便以为同一的,能被各种浏览器识别的语言

由于语言的转换灵活多样,babel的做法和postcss,webpack差不多,它本身提供一些分析功能,真正的转换需要依托插件来完成

babel可以和构建工具联合使用,也可以独立使用

如果要独立使用babel,需要安装下面两个库

npm i -D @babel/core @babel/cli

@babel/cli的使用极其简单

它提供了一个命令

# 按文件编译
babel 需要编译的文件 -o 编译结果文件
# 按目录编译
babel 需要编译的整个目录 -d 编译结果放置目录

可以看到,babel本身没有做任何事情,真正的编译要依托于babel插件和babel的预设

babel的预设和postcss一样,是个插件的集合体,用于解决一系列常见的兼容问题

如何告诉babel需要使用哪些插件或预设呢?需要通过一个配置文件.babelrc

{
    "presets": [],
    "plugins": []
}