什么是babel?
将高版本的es转换成在浏览器中普适性较好的es版本
这句话也反应了babel的原理,babel分为三步,解析转化和生成
babel如何运行的
解析生成ast树,ast树是一个描述对象
转化通过插件来实行,插件也是babel的核心
插件分为语法插件和转译插件,大部分语法babel都能解决,但是有一些特殊语法babel无法解析,这是需要调用语法插件,如果同时调用转译插件和语法插件,转译插件会生效,他会调用语法插件
除了插件还有一个是预设,他们都被放在了babel的配置文件.babelrc
中。
预设可以说是一个插件的集合,它能够根据一定配置信息来选择相应的插件(比如说浏览器版本,node版本),这样就免去了我们手动去选择相应的插件
同时预设和插件在执行顺序上也有差别,预设的执行顺序是从右往左,而插件是从左往右
babel如何使用?
上面讲述的是babel的一些运行机制,而如何使用babel?
1.使用babel-cli
npm安装相应的包,然后在命令行去调用命令就能使用
2.在webpack这类打包工具中使用babel-loader
在webpack中使用需要依赖于babel去对js文件进行转换
babel插件
1.babel-node
babel-cli工具自带一个babel-node命令,提供一个支持ES6的REPL环境。可以将我们的js文件使用这个npm包执行
2.babel-register
在一个js文件里面引入babel-register这个包之后,他都会对require引入的.js、.jsx、.es 和 .es6 后缀名的文件,就会先用 babel 进行转码。这个转换过程是运行时的,也就是不会生成最终的结果,只是在用的时候进行转换
3.babel-core
如果想调用babel相关的api,就需要使用这个包。具体的也没有使用过
4.babel-polyfill
babel对新增的api转换不支持,需要使用的一定的垫片,也就是这个内容要被添加到生成环境中
如果想在webpack中使用babel,可以使用babel-loader,同时基于babel-loader把其他插件作为配置选项加入进去
babel相关问题
看到知乎上的一个问题,
安装babel不就是为了使用es的所有新特性么,为什么还要弄个插件配置来说明我要用哪些新特性?
我按照我认为的一个点进行了转换
为什么不将高版本的内容一股脑的转换为低版本的内容?
如何针对不同平台的支持情况,减少无用特性的编译。 也就是一些新的特性在浏览器的支持程度已经很高了,我们没有必要再去占用资源来进行转换。
这也是为什么现在有了 babel-preset-env,可以自动根据目标平台分析需要用哪些插件。
最后是babel用到知识体现,先遗留下来
1.源码到AST树
2.运行时优化(比如重复代码等): @babel/runtime(包含regenerator-runtime)