Babel是什么?

更新日期: 2019-05-30阅读: 3k标签: babel

要是官方文档写得好的话,我也许就不用自己做个笔记。


官方文档

babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情:

1、语法转换
2、通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
3、源码转换 (codemods)
4、更多! (查看这些 视频 获得启发)

PS:https://www.babeljs.cn/docs/

指南文档第一篇关于babel的解释,就有三个问题:

1、第2句中“通过 Polyfill 方式”这一段。在解释一个概念时,引入自己的内容细节作延伸解释,会让人产生另一个疑问,这东西又是什么?它该回答的是这是什么,而不应该包含这怎么做。

2、第4句的更多查看视频的,更让人无语。我从没看过一个框架、库或工具,是需要读者看视频来总结该东西的功能的。连一个工具的功能都不能简洁说明,实在不明白写文档的人在想什么。

3、文档组织缺少逻辑,比较零散。例如指南刚说了Babel的功能,下面却写了一些插件的使用方法,以此反向引出Babel的功能,即散乱,又不全面。


Babel是什么

Babel是将ES6及以上版本的代码转换为ES5的工具。它用 babel.config.js 或 .babelrc 文件作为配置文件,其中最为重要的配置参数是presets和plugins。

plugins:Babel插件可以将输入源码进行转换,输出编译后的代码。
presets:一组Babel插件,目的是方便使用。官方已经内置了一些preset,如babel-preset-env。

PS:其他的查看Babel文档就行。


现学现用

以 .babelrc 配置文件为例,解释常用的用法。

例子一:

{
   "presets": [["es2015", { "modules": false }]],
   "plugins": [
     [
       "component",
       {
         "libraryName": "element-ui",
         "styleLibraryName": "theme-chalk"
       }
     ]
   ]
}

PS:ES2015 = ES6

这个Babel配置:

1、使用 babel-preset-es2015(简写为es2015)将ES6的代码转为ES5。PS:https://www.npmjs.com/package/babel-preset-es2015

2、“ modules: false”,是不把模块转换成其他模块类型("amd" | "umd" | "systemjs" | "commonjs" | "cjs" )。

3、”component",其实也就是 babel-plugin-component 插件,它是将组件的引用代码进行转换。PS:https://www.npmjs.com/package/babel-plugin-component

Converts
import { Button } from 'components'
to
var button = require('components/lib/button’)
require('components/lib/button/style.css')

例子二:

{
 "presets": [
   ["env", {
     "modules": false,
     "targets": {
       "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
     }
   }],
   "stage-2"
 ],
 "plugins": [],
 "env": {
   "test": {
     "presets": ["env", "stage-2"],
     "plugins": ["istanbul"]
   }
 }
}

这个Babel配置:

1、使用 babel-preset-env 将ES6的代码转为ES5。presets里的“env” 是模块名称,作为第一个参数,第二个参数是该模块的传入参数。

虽然 babel-preset-es2015 与 babel-preset-env 的功能类似,但推荐使用 babel-preset-env ,babel-preset-es2015已不建议使用。PS:详细参数解释请看https://www.npmjs.com/package/babel-preset-env,比官方文档写得更清晰。

2、presets设置了env和stage-2,模块的执行顺序是从下至上,从高级版本到低级版本。这很好理解,例如代码里包含ES7和ES6的语法,那你肯定得先转换ES7,再转换ES6,因为ES7的代码可能转换成ES6的代码。

3、根层级的“env”,则是在不同NODE_ENV参数下,另一套生效的Babel配置。如里面的“test”所配置的,就是在 NODE_ENV=test 时的Babel配置。PS:babel-plugin-istanbul请看https://www.npmjs.com/package/babel-plugin-istanbul


总结

要是想看babel的一些插件的具体用法,建议是直接在npm上看,Babel的文档看起来实在难受。 


链接: https://www.fly63.com/article/detial/3949

Babel中的stage-0,stage-1,stage-2以及stage-3的作用(转)

大家知道,将ES6代码编译为ES5时,我们常用到Babel这个编译工具。大家参考一些网上的文章或者官方文档,里面常会建议大家在.babelrc中输入如下代码

深入理解Babel原理及其使用,babel把ES6转成ES5的原理是什么?

文的babel使用场景局限于babel配合webpack来转译输出es5的js代码,babel的命令行、以代码形式调用或node环境下这些统统都不会涉及。Babel使用的难点主要在于理解polyfill、runtime和core-js。

ES6之Babel的各种坑总结【转载】

自从 Babel 由版本5升级到版本6后,在安装和使用方式上与之前大相径庭,于是写了这篇入坑须知,以免被新版本所坑。坑一本地安装和全局安装 、坑二编译插件、坑三babel-polyfill插件

babel-preset-env:一个帮你配置babel的preset

babel-preset-env 一个帮你配置babel的preset,根据配置的目标环境自动采用需要的babel插件。babel-preset-env 功能类似 babel-preset-latest,优点是它会根据目标环境选择不支持的新特性来转译

babel-polyfill使用与性能优化

本文主要内容包括:什么是babel-polyfill,如何使用,如何通过按需加载进行性能优化。babel只负责语法转换,比如将ES6的语法转换成ES5。但如果有些对象、方法,浏览器本身不支持,此时需要引入babel-polyfill来模拟实现这些对象、方法。

babel的初步了解

由于现在前端出现了很多非es5的语法,如jsx,.vue,ts等等的格式和写法。babel其实是一个解释器,它主要讲进行中的代码分为三个阶段执行:解释,转换,生成。

深入类和继承内部原理+Babel和 TypeScript 之间转换

在 JavaScript 中,没有基本类型,创建的所有东西都是对象。例如,创建一个新字符串,与其他语言不同,在 JavaScript 中,字符串或数字的声明会自动创建一个封装值的对象,并提供不同的方法,甚至可以在基本类型上执行这些方法。

使用 Webpack 与 Babel 配置 ES6 开发环境

在项目根目录下新建一个配置文件—— webpack.config.js 文件:执行编译打包命令,完成后打开 bundle.js 文件发现 isNull 和 unique 两个函数没有被编译,和 webpack 官方说法一致:webpack 默认支持 ES6 模块语法,要编译 ES6 代码依然需要 babel 编译器。

Babel_如何写一个Babel插件

Babel对代码进行转换,会将JS代码转换为AST抽象语法树(解析),对树进行静态分析(转换),然后再将语法树转换为JS代码(生成)。每一层树被称为节点。每一层节点都会有type属性,用来描述节点的类型。其他属性用来进一步描述节点的类型。

初学 Babel 工作原理

Babel 对于前端开发者来说应该是很熟悉了,日常开发中基本上是离不开它的。我们已经能够熟练地使用 es2015+ 的语法。但是对于浏览器来说,可能和它们还不够熟悉,我们得让浏览器理解它们,这就需要 Babel

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!