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
import { Button } from 'components'
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的文档看起来实在难受。
Babel是什么?的更多相关文章
- babel presets stage-x
在一些新框架的代码中,常基于es6/7标准来书写代码.鉴于这些标准被没有被浏览器广泛支持,我们一般使用babel来将使用e6/7标准书写的代码降级编译(或者说转译)为浏览器可解析的es4/5代码. 以 ...
- ES6转换器之Babel
ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都 ...
- Babel:JavaScript编译器
一.介绍: Babel是一个Javascript编译器,可以将ES6语法转换成ES5. 这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持.下面是一个例子: //转码前: input. ...
- 学习 React(jsx语法) + es2015 + babel + webpack
视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...
- Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探
用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...
- Babel下的ES6兼容性与规范
前端开发 Babel下的ES6兼容性与规范 ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...
- 【前端】在Gulp中使用Babel
Install $ npm install --save-dev gulp-babel babel-preset-es2015 用法1: const gulp = require('gulp'); c ...
- 使用 Babel + React + Webpack 搭建 Web 应用
话不说直接上正题. 环境搭建 Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现 ...
- Babel 学习
一,为了更明白地使用Babel, 先了解Babel 的发展过程. 现在Babel的版本是6, 相对于以前的版本, 它做了重大更新: 1, 模块化:所有的内部组件都变成了单独的包.打开Babel在Git ...
- 利用Babel来转化你的ES2015脚本初步
我们在前面已经安装和学习过babel 安装babel-cli 这是babel解释器的客户端主程序 npm install -g babel-cli 安装”编译”插件(babel的JSX语法转换器) n ...
随机推荐
- MyEclipse各种版本号注冊码
一:MyEclipse_6.0.1GA_E3.3.1_FullStackInstaller注冊码 Subscriber:javp Subscription Code:wLR7ZL-655551-685 ...
- PLC中ST语言的几种程序流程控制语句
ST语言是IEC61131-3中规定的5中标准语言之一,目前常用见品牌的PLC都支持这种语言(施耐德,AB可以直接选择创建该类型的程序段或者功能块,西门子的略微麻烦一点),ST语言的一个好处是移植性好 ...
- The Python Challenge 题解
仔细阅读,图画下面的提示(网页的 title 也是重要的提示信息,至少告诉你考察的对象是什么) 1. 238 >> 2**38 274877906944L 根据提示,在 URL 地址处,0 ...
- .NET/C# 使窗口永不激活(No Activate 永不获得焦点)
原文 .NET/C# 使窗口永不激活(No Activate 永不获得焦点) 有些窗口天生就是为了辅助其它程序而使用的,典型的如“输入法窗口”.这些窗口不希望抢夺其它窗口的焦点. 有 Win32 方法 ...
- 怎样将数据库MySQL 迁移到 MariaDB 上
自从甲骨文收购 MySQL 后,由于甲骨文对 MySQL 的开发和维护更多倾向于闭门的立场,很多 MySQL 的开发者和用户放弃了它.在社区驱动下,促使更多人移到 MySQL 的另一个叫 MariaD ...
- PBS 作业调度应用
PBS(Portable Batch System),最初由 NASA 的 Ames 研究中心开发,主要为了提供一个能满足异构计算网络需要的软件包,用于灵活的批处理(Portable Batch Pr ...
- WPF 画线动画效果实现
原文:WPF 画线动画效果实现 弄了将近三天才搞定的,真是艰辛的实现. 看了很多博客,都太高深了,而且想要实现的功能都太强大了,结果基础部分一直实现不了,郁闷啊~ 千辛万苦终于找到了一个Demo,打开 ...
- Linux(CentOS 7)+ Nginx(1.10.2)+ Mysql(5.7.16)+ PHP(7.0.12)完整环境搭建
首先安装Linux系统,我以虚拟机安装来做示例,先去下载 VitualBox,这是一款开源的虚拟机软件,https://www.virtualbox.org 官网地址.或者是VMware,www.vm ...
- UVALive 6485 Electric Car Rally (BFS,PQ)
https://icpcarchive.ecs.baylor.edu/index.php? option=com_onlinejudge&Itemid=8&page=show_prob ...
- AngularJS ng-if使用
示例中,根据ng-if指令显示不同任务状态,以及判断任务是否可以操作 <div ng-app="NgifDemoApp" ng-controller="NgifDe ...