babel-preset-es2015,babel-polyfill 与 babel-plugin-transform-runtime
babel-preset-es2015 是一个babel的插件,用于将部分ES6 语法转换为ES5 语法。转换的语法包括:
- 箭头函数
var a1 = () => 1
编译为
var a1 = function a1() {
return 1;
};var obj = {
birth: ,
getAge: function () {
var fn = () => new Date().getFullYear() - this.birth
return fn()
}
} 编译为
var obj = {
birth: ,
getAge: function getAge() {
var _this = this; var fn = function fn() {
return new Date().getFullYear() - _this.birth;
};
return fn();
}
}; - class语法
class Test {
constructor (x, y) {
this.x = x
this.y = y
} toString () {
return '(' + this.x + ', ' + this.y + ')'
}
}继承:
class Testextend extends Test{
constructor (x, y) {
super(x, y) // super表示父类的构造函数
this.name = 'hello'
} getName () {
return 'haha'
}
} - const和let
const con = 1
con = 2 // babel编译时会报错for (let i = 1; i < 5; i++) {
setTimeout(function () {
console.log(i)
}, 100)
}
编译为:
var _loop = function _loop(i) {
setTimeout(function () {
console.log(i);
}, 100);
}; for (var i = 1; i < 5; i++) {
_loop(i);
} - 对象属性名表达式:
let a = {
['a'+'b']: 1
} - 对象简写
var o = { a, b, c }; var cat = {
getName() {
return name;
}
}; - 函数参数的新语法:【默认参数 、剩余参数 】
function test1 (a = 1, b = 2) {
alert(a + b)
}
编译为
function test1() {
var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2; alert(a + b);
}function test2 (a, ...args) {
console.log(args)
}
编译为
function test2(a) {
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
} console.log(args);
} - 解构赋值
let [q, w, e] = [1, 2, 3]
编译为
var q = 1,
w = 2,
e = 3;let {r: ss, t, y} = {r: 1, t: 2, y: 3}
编译为
var _r$t$y = { r: 1, t: 2, y: 3 },
ss = _r$t$y.r,
t = _r$t$y.t,
y = _r$t$y.y; - 字符串模板
let str1 = 'hel'
let str2 = 'ld'
let str3 = '科科'
let str4 = `${str1}lo
wor${str2}!
${str3}` 编译为
var str1 = 'hel';
var str2 = 'ld';
var str3 = '科科';
var str4 = str1 + 'lo \nwor' + str2 + '!\n' + str3;(8之后的需要polify支持才能在不完全支持es2015的浏览器正常使用)
- for-of
- ES2015 modules 转换为 CommonJS
- generator语法转换
- 正则表达式u修饰符 等
(项目中现在一般直接使用babel-preset-env,她整合了babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017,而且可以配置需要支持的浏览器/运行环境,仅转化需要支持的语法,使文件更轻量)
但是babel-preset-es2015并不会转换promise、generator等函数,我们还要引入babel-polify库。
使用babel-polify时,需要在你的业务代码中,在使用ES6的新函数 前通过<script>
或require 等 引入 babel-polyfill(就像引入jquery一样),她会把promise等函数添加到全局对象上;
babel-plugin-transform-runtime 插件做了以下三件事:
- 当你使用 generators/async 函数时,自动引入
babel-runtime/regenerator
(使用 regenerator 运行时而不会污染当前环境)
。 - 自动引入
babel-runtime/core-js
并映射 ES6 静态方法和内置插件(实现polyfill的功能且无全局污染,但是实例方法无法正常使用,如 "foobar".includes("foo") )。 - 移除内联的 Babel helper 并使用模块
babel-runtime/helpers
代替(提取babel转换语法的代码)。
他们分别对应下面三个配置(默认都为true)
{
"plugins": [
["transform-runtime", {
"regenerator": true,
"polyfill": true,
"helpers": true
}]
]
}
babel-preset-es2015,babel-polyfill 与 babel-plugin-transform-runtime的更多相关文章
- babel版本兼容报错处理:Plugin/Preset files are not allowed to export objects
原文地址: https://www.cnblogs.com/jiebba/p/9618930.html 1.为什么会报错 ? 这里抱着错误是因为 babel 的版本冲突. 多是因为你的 babel 依 ...
- vue项目bug-Couldn’t find preset "es2015"
在使用vue项目的时候安装了其他的插件,发现会报错 Couldn’t find preset "es2015".是因引用的插件使用了es标准,解决办法如下 npm install ...
- MODULE BUILD FAILED: ERROR: COULDN’T FIND PRESET “ES2015” RELATIVE TO DIRECTORY
npm run dev 遇到报错: Module build failed: Error: Couldn't find preset "es2015" relative to di ...
- [AST Babel Plugin] Transform code, add line:column number for console log
For example we have current code: function add(a, b) { console.log(a, b) return a + b } function sub ...
- let import export React入门实例教程 connect provider combineReducers 箭头函数 30分钟掌握ES6/ES2015核心内容 Rest babel
let与var的区别 http://www.cnblogs.com/snandy/archive/2015/05/10/4485832.html es6 导入导出 http://www.csdn.ne ...
- 前端笔记之ES678&Webpack&Babel(上)初识ES678&Babel&let和const&解构&语法
一.ES版本简介和调试运行方法 1.1 ECMAScript简介 MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript JavaS ...
- babel使用入门以及使用webpack+babel来"编译"你的JS代码
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5,从而在现有的环境中执行. 这是一个开端,以后遇到问题,也会持续记录. 一.babel配置 官网有更详细的配置教程:https://www. ...
- 【babel+小程序】记“编写babel插件”与“通过语法解析替换小程序路由表”的经历
话不多说先上图,简要说明一下干了些什么事.图可能太模糊,可以点svg看看 背景 最近公司开展了小程序的业务,派我去负责这一块的业务,其中需要处理的一个问题是接入我们web开发的传统架构--模块化开发. ...
- VUE 采坑之旅-- Mint-ui 按需引入报出Module build failed: Error: Couldn't find preset "es2015" relative to directory "C:\\phpStudy\\PHPTutorial\\WWW\\text\\vuep\\vue-demo"
首先按照mint-ui的文档中按需引入的要求,先执行 npm install babel-plugin-component -D 然后,将.babelrc文件替换了,但是后来我又将其改了(采坑过程我也 ...
- Couldn't find preset "es2015" relative to directory问题解决
由于是菜鸟没使用ES标准,而引入的vue-ueditor使用了ES标准,所以编译会报错,解决办法如下: npm install babel-preset-es2015 --save-dev 然后需要在 ...
随机推荐
- ABAP CDS - 字符串函数
下表显示了ABAP CDS中CDS视图中字符串的潜在SQL函数,以及对参数的要求.函数的含义可以在字符串的SQL函数下找到. 函数 参数类型 返回类型 CONCAT(arg1, arg2) See b ...
- WPF中的数据模板(DataTemplate)
原文:WPF中的数据模板(DataTemplate) WPF中的数据模板(DataTemplate) ...
- 谷歌面试官经典作品(CTCI)目录
1.1 判断一个字符串中的字符是否唯一 1.2 字符串翻转 1.3 去除字符串中重复字符 1.8 利用已知函数判断字符串是否为另一字符串的子串 2.1 从链表中移除重复结点 2.2 实现一个算法从一个 ...
- Django笔记 —— 模板高级进阶
最近在学习Django,打算玩玩网页后台方面的东西,因为一直很好奇但却没怎么接触过.Django对我来说是一个全新的内容,思路想来也是全新的,或许并不能写得很明白,所以大家就凑合着看吧- 本篇笔记(其 ...
- 自学MVC开发基础
由于现在面试需求,我必须有点了解MVC开发基础,MVC是一个开发框架或者是一个开发模式,MVC让软件开发的过程大致切割成三个单元,分别是:Model(模型).View(试图).Controller(控 ...
- 杜绝网上压根没测过就乱写之 《oracle mybatis 返回自增主键 》
面试过好多人,包括自己也属于这么一个情况: 遇到问题直接去网上查,一般都可以查到解决方案.其中也包括一些基本的面试资料的答案. 其实有很多答案也都是正确的,但是还是存在一些压根就是胡乱抄来的答案,也不 ...
- 参加2018之江杯全球人工智能大赛 :视频识别&问答(四)
很遗憾没有在规定的时间点(2018-9-25 12:00:00)完成所有的功能并上传数据,只做到写了模型代码并只跑了一轮迭代,现将代码部分贴出. import keras from keras.lay ...
- 测试理论--branch testing and boundary testing
1 branch testing 分支测试 测试代码的所有分支 2 boundary testing 测试 程序的限制条件
- Android Service 服务(三)—— bindService与remoteService
(转自:http://blog.csdn.net/ithomer/article/details/7366396) 一.bindService简介 bindService是绑定Service服务, ...
- 软工实践Beta冲刺(5/7)
队名:起床一起肝活队 组长博客:博客链接 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去两天完成了哪些任务 描述: 1.界面的修改与完善 展示GitHub当日代码/文档签入记 ...