ES6转ES5 你需要Babel
Babel介绍
Babel是一个 ES6 转码器,能将 ES6 代码转为 ES5 代码,这样原本不支持ES6的老版本浏览器执行ES6代码
// 转码前:使用了ES6箭头函数
items.map(item => item + 1);// 转码后:转为了普通函数
items.map(function (item) {return item + 1;
});
Babel安装
安装 Babel,一个命令就够了:
$ npm install --save-dev @babel/core
Babel使用
注意!!! Babel 工具和模块的使用,都必须先写好Babel的配置文件 .babelrc
// 初始状态下的.babelrc文件内容
{"presets": [], "plugins": []
}
其中 presets 主要用于设定转码规则,官方提供了规则集,可按自己的需要去安装相应的规则集,也可以说是预设
# 最新转码规则
$ npm install --save-dev @babel/preset-env# react 转码规则
$ npm install --save-dev @babel/preset-react
安装好后,就把安装的规则集填入上面说的presets字段里
// 填入了规则集的.babelrc文件内容{"presets": ["@babel/env","@babel/preset-react"],"plugins": []}
写好.babelrc文件后呢,那就可以开始使用咯
babel提供了几种使用方式去转码,这里一一介绍
1. 使用babel命令行转码
Babel 提供命令行工具@babel/cli
,用于命令行转码。
如果你要使用命令进行转码的话,当然是先安装这个工具,安装命令:
$ npm install --save-dev @babel/cli
用法:
# 转码结果输出到标准输出
$ npx babel example.js# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib# -s 参数生成source map文件
$ npx babel src -d lib -s
2. 使用babel-node
命令得到REPL 环境转码
@babel/node
模块的babel-node
命令,提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能,能直接运行 ES6 代码。
如果你要在该环境中进行转码的话,当然是先安装上@babel/node
模块,模块安装命令:
$ npm install --save-dev @babel/node
安装好后,输入babel-node
命令,就能进入这个环境了
$ npx babel-node
另外babel-node
命令直接运行 ES6 脚本
// es6.js 文件
(x => x * 2)(1)
这里可以使用babel-node命令运行es6.js这个文件,可以得到以下结果
$ npx babel-node es6.js
2
3. 使用require
命令只对某些类型文件转码
@babel/register
模块改写require
命令,为它加上一个钩子。此后,每当使用require
加载.js
、.jsx
、.es
和.es6
后缀名的文件,就会先用 Babel 进行转码。
同样先安装该模块:
$ npm install --save-dev @babel/register
使用时,必须首先加载@babel/register
。
// index.js
require('@babel/register');
require('./es6.js');
// es6.js 文件
(x => x * 2)(1)
然后,就不需要手动对index.js
转码了。
$ node index.js
2
需要注意的是,@babel/register
只会对require
命令加载的文件转码,不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。
4. 提供对默认不转码的方法进行转码
由于Babel 默认只转换新的 JavaScript 句法(syntax),不转换新的 API,比如Iterator
、Generator
、Set
、Map
、Proxy
、Reflect
、Symbol
、Promise
等全局对象,以及一些定义在全局对象上的方法(比如Object.assign
)都不会对它们进行转码。
也就是说比如像ES6 在Array
对象上新增了Array.from
方法。Babel 就不会转码这个方法。
那么想让这个方法运行,就可以使用core-js
和regenerator-runtime
(后者提供generator函数的转码),为当前环境提供一个垫片。
同样需要先安装
$ npm install --save-dev core-js regenerator-runtime
然后,在脚本头部,加入如下两行代码。
import 'core-js';
import 'regenerator-runtime/runtime';
// 或者
require('core-js');
require('regenerator-runtime/runtime');
5. 在浏览器环境转码
使用@babel/standalone模块提供的浏览器版本,将其插入网页。
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>
注意:网页实时将 ES6 代码转为 ES5,对性能会有影响。因为生产环境需要加载已经转码完成的脚本。
另:Babel 提供一个REPL 在线编译器,可以在线将 ES6 代码转为 ES5 代码。转换后的代码,可以直接作为 ES5 代码插入网页运行。
总结:就是先安装babel,然后配置好.babelrc文件,再根据场景选择一种或者多种方式,安装相应的模块或者工具进行使用。
ES6转ES5 你需要Babel相关推荐
- ES6转ES5:Gulp+Babel
目标: ES6代码转成ES5 对转换后的ES5进行压缩 以上步骤自动监控执行 步骤: 1.安装插件 在命令行中定位到项目根目录 安装全局 Gulp npm install -g gulp 安装项目中使 ...
- es5直接引入html文件,ES6+转ES5(webpack+babel、指定多个js文件、自动注入)
接续上篇ES6+转ES5,本篇将使用webpack和babel将多个不同目录下指定的多个ES6+语法的js文件编译为ES5,并将编译后的文件配置注入对应的html文件. 一.新建项目,目录如下 二.执 ...
- babel ES6 转换 ES5 实现原理
babel ES6 转换 ES5 实现原理 前言 babel 各种包介绍 转换过程 案例 前言 前面写过一篇简单的 AST 抽象语法树的文章 简述 AST 抽象语法树.今天来看一下在 babel 中是 ...
- 本地实现ES6转ES5代码——gulpfile配置文件
公司里很多同事在用ES6实现业务逻辑了,我也想试试.在公司的项目里,我写的ES6只要打开命令窗输入gulp watch 就自动将ES6转成ES5并放在相应的文件夹里了.我回家也想练习,但又不知道该怎么 ...
- es6 ik分词热更新MySQL_rollup环境搭建(es6转es5、压缩、本地服务器、热更新)
文件目录 package.json { "name": "my-vue", "version": "1.0.0", &q ...
- webpack打包ES6降级ES5
Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码,所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性. 安装babel实现ES6到ES5 npm instal ...
- ES6学习(一)— Babel转码器的使用和配置
ES6学习(一)- Babel转码器的使用和配置 Babel转码器 Babel是一个广泛使用的ES6转码器,可以将ES6代码转化为ES5代码从而在老版本的浏览器进行. 这意味着,你可以使用ES6的方式 ...
- Webpack——ES6转ES5
万恶的IE遗臭万年仍然需要填坑 ie标准对html/css甚至js的规范简直相差甚远,所以,一般要解决的兼容问题很大一部分是为了解决ie的不兼容,虽然目前流行的ES6语法及规范将IE的考虑抛弃掉,默认 ...
- es6转es5 的6种方式
es6转码es5 一.Babel 在线转码 二.谷歌的Traceur 在线转码 三.es6console 在线转码并运行 四.Traceur 在页面中引入使用 //加载 Traceur 文件 < ...
最新文章
- python2和python3区别
- Linux查看utmp文件,linuxc操作utmp和wtmp文件接口
- 解决在ascx使用outputcache就不可以设置用户控件自己的属性
- mysql环境搭载后老出错_使用Docker在window10下搭建SWOFT开发环境,mysql连接错误
- java中广告维护轮播图怎么做_Banner广告轮播图
- 【数据结构与算法】算法的空间复杂度
- 什么是车联网?导航?听歌?智能语音识别?事实没这么简单!
- 使用with语句:记录时间检查路径
- Chapter 6-Blurring Things Up之Do It Twice
- 移动数据通信网络工作原理(SGSNGGSN)
- BScroll切换才能滚动,刷新一下就不能滚动
- iOS中PCH文件的使用
- 自定义Tab切换+自定义CheckBox+light7无限滑动/下拉刷新
- PGP生成秘钥对及应用
- Kotlin开发遇到java.lang.VerifyError问题记录
- clear:both在HTML页面中的用法
- [CCD] CCD感光模块的尺寸是怎么算的?
- 盘点10个一天可以收入100元的副业,让你生活多一份收入
- 【电子书制作软件】云展网教程 | 如何获得书橱的嵌入代码?
- html网页改兼容模型,浏览器兼容、CSS hack、normalize.css及盒模型基础知识问答