Babel总结
什么是babel?
babel是一个JavaScript编译器。
Babel是一个工具链,主要用于将ECMAScript 2015+代码转换为向后兼容的旧浏览器或环境中JavaScript版本。
注解:传统的编译是指转化成可执行的代码,也就是二进制代码。但是对于前端来说,因为JS是解释性语言,对于浏览器或者Node来说就是可执行的代码。
因此,前端的编译就是指将语言转化为浏览器或Node可以执行的代码,也就是能执行的js语句。因为现在的很多浏览器未能全面支持ES6/7/8,基本都全部支持ES5了,
所以这时候就需要Babel来将它们转化成低版本的JS代码,比如ES5。
所以我们使用ES6时就要用到babel,使用jsx语法时也要用到babel。
preset和plugin
Babel插件一般尽可能拆成小的力度,开发者可以按需引进。比如对ES6转ES5的功能,Babel官方拆成了20+个插件。
这样的好处显而易见,既提高了性能,也提高了扩展性。比如开发者想要体验ES6的箭头函数特性,那他只需要引入transform-es2015-arrow-functions
插件就可以,而不是加载ES6全家桶。
但很多时候,逐个插件引入的效率比较低下。比如在项目开发中,开发者想要将所有ES6的代码转成ES5,插件逐个引入的方式令人抓狂,不单费力,而且容易出错。
这个时候,可以采用Babel Preset。
可以简单的把Babel Preset视为Babel Plugin的集合。比如babel-preset-es2015
就包含了所有跟ES6转换有关的插件。
具体可看这里
什么是polyfill?
由于 Babel 只转换语法(如箭头函数), 你可以使用 babel-polyfill 支持新的全局变量,例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。
它会仿效一个完整的 ES2015+ 环境,并意图运行于一个应用中而不是一个库/工具。这个 polyfill 会在使用 babel-node
时自动加载。
这意味着你可以使用新的内置对象比如 Promise
或者 WeakMap
, 静态方法比如 Array.from
或者 Object.assign
, 实例方法比如 Array.prototype.includes
和生成器函数。为了达到这一点, polyfill 添加到了全局范围,就像原生类型比如 String
一样。
如何使用babel?
因为现在基本上都是用webpack构建项目,主要讲下如何在webpack中使用babel。
当然如果你只是想单独体验babel的话,可以安装babel的脚手架babel-cli:babel-cli
1.安装
需要的是babel-loader和babel-core,babel-core是babel核心代码库,babel-loader用于在打包前对代码进行编译转换。
npm install --save-dev babel-loader babel-core
2.在webpack中配置
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
3.创建.babelrc文件
虽然已经配置好了 Babel ,但并没有让它真正生效。在项目的根目录中创建一个.babelrc文件并启用一些插件。
首先,你可以使用转换 ES2015+ 的 env preset 。
npm install babel-preset-env --save-dev
为了让 preset 生效,你需要像下面这样定义你的 .babelrc
文件:
{
"presets": ["env"]
}
如何使用babel-polyfill?
1.安装
npm install --save babel-polyfill
2.使用
a.在node/browserify中使用
你需要在你的应用入口顶部通过 require 将 polyfill 引入进来。
require("babel-polyfill");
如果你在你的应用入口使用 ES6 的 import
语法,你需要在入口顶部通过 import 将 polyfill 引入,以确保它能够最先加载:
import "babel-polyfill";
b.在webpack中使用
在 webpack.config.js
中,将 babel-polyfill
加到你的 entry 数组中:
module.exports = {
entry: ["babel-polyfill", "./app/js"]
};
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 ...
随机推荐
- Java第一次考试作业
这次考试感觉自己充分的意识到自己的不足,对于Java没有系统的理解,敲程方面也有很大问题,本次程序题目为ATM机的账户记录Account有账户的唯一性标识,用户的姓名,操作日期(Date),操作类型, ...
- TP5数据库操作方法
一.TP5数据库操作方法 1.name()方法作用 : 指定默认的数据表名(不含前缀)示例 : Db::name(‘weiba_post’);返回 : Db对象 2.setTable()方法作用 : ...
- C#项目中关于多个程序集下App.config文件的问题
在项目中我们会经常用到App.config文件,有的是自动生成的,比如引用webservice.wcf服务时生成:也有手动建立的配置文件直接默认名就为app.config.这些配置有的保存当前程序集用 ...
- 三级菜单(低端版VS高端版)
>>>低端版 menu={'山西': {'太原': {'迎泽':['柳巷','五一广场','太原站'], '小店':['山西财经大学','山西大学','武宿机场'], '晋源':[' ...
- Python记录4:文件操作
###文件 ''' 1. 什麽是文件 文件是操作系統為用戶/应用程序提供一種操作硬盤的虚拟单位 2. 爲何要用文件 为了存取硬盘数据 3. 如何用文件 #1. 打開文件 #2. 读写文 ...
- 在TensorFlow中运行程序多次报错:AttributeError: __exit__
我没有记住语句 with tf.Session() as sess: 多次写成了 with tf.Session as sess: 吃括号这个低级的错误又犯了,真不应该,立下flag:以后再犯相同的错 ...
- windows批处理定时关机
2017-04-11 windows bat文件可以简化很多cmd命令,为我们提供很多方便.今天介绍定时关机的批处理代码实现: 我们知道windows下的定时关机可以通过shutdown命令实现,如果 ...
- GCD(莫比乌斯+去重)
题目链接 莫比乌斯反演模板题, 去重即可: 我们可以发现只有在区间重叠部分才会有重复且为cal(e, e, k)/2;(e表示b, d中较小的一个): #include<cstdio> # ...
- 【Elasticsearch学习之二】Elasticsearch Rest风格操作
环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 elasticsearch-2.2.0 一.Rest简介Re ...
- 【Hbase学习之三】Hbase Java API
环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 hadoop-2.6.5 hbase-0.98.12.1-h ...