babel-preset-es2015 是一个babel的插件,用于将部分ES6 语法转换为ES5 语法。转换的语法包括:

  1. 箭头函数

    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();
    }
    };
  2. 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'
    }
    }
  3. 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);
    }
  4. 对象属性名表达式:
    let a = {
    ['a'+'b']: 1
    }
  5. 对象简写
    var o = { a, b, c };
    
    var cat = {
    getName() {
    return name;
    }
    };
  6. 函数参数的新语法:【默认参数 、剩余参数 】
    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);
    }
  7. 解构赋值
    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;
  8. 字符串模板
    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的浏览器正常使用)

  9. for-of
  10. ES2015 modules 转换为 CommonJS
  11. generator语法转换
  12. 正则表达式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的更多相关文章

  1. babel版本兼容报错处理:Plugin/Preset files are not allowed to export objects

    原文地址: https://www.cnblogs.com/jiebba/p/9618930.html 1.为什么会报错 ? 这里抱着错误是因为 babel 的版本冲突. 多是因为你的 babel 依 ...

  2. vue项目bug-Couldn’t find preset "es2015"

    在使用vue项目的时候安装了其他的插件,发现会报错 Couldn’t find preset "es2015".是因引用的插件使用了es标准,解决办法如下 npm install ...

  3. 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 ...

  4. [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 ...

  5. 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 ...

  6. 前端笔记之ES678&Webpack&Babel(上)初识ES678&Babel&let和const&解构&语法

    一.ES版本简介和调试运行方法 1.1 ECMAScript简介 MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript JavaS ...

  7. babel使用入门以及使用webpack+babel来"编译"你的JS代码

    Babel是一个广泛使用的转码器,可以将ES6代码转为ES5,从而在现有的环境中执行. 这是一个开端,以后遇到问题,也会持续记录. 一.babel配置 官网有更详细的配置教程:https://www. ...

  8. 【babel+小程序】记“编写babel插件”与“通过语法解析替换小程序路由表”的经历

    话不多说先上图,简要说明一下干了些什么事.图可能太模糊,可以点svg看看 背景 最近公司开展了小程序的业务,派我去负责这一块的业务,其中需要处理的一个问题是接入我们web开发的传统架构--模块化开发. ...

  9. 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文件替换了,但是后来我又将其改了(采坑过程我也 ...

  10. Couldn't find preset "es2015" relative to directory问题解决

    由于是菜鸟没使用ES标准,而引入的vue-ueditor使用了ES标准,所以编译会报错,解决办法如下: npm install babel-preset-es2015 --save-dev 然后需要在 ...

随机推荐

  1. ABAP CDS - 字符串函数

    下表显示了ABAP CDS中CDS视图中字符串的潜在SQL函数,以及对参数的要求.函数的含义可以在字符串的SQL函数下找到. 函数 参数类型 返回类型 CONCAT(arg1, arg2) See b ...

  2. WPF中的数据模板(DataTemplate)

    原文:WPF中的数据模板(DataTemplate) WPF中的数据模板(DataTemplate)                                                   ...

  3. 谷歌面试官经典作品(CTCI)目录

    1.1 判断一个字符串中的字符是否唯一 1.2 字符串翻转 1.3 去除字符串中重复字符 1.8 利用已知函数判断字符串是否为另一字符串的子串 2.1 从链表中移除重复结点 2.2 实现一个算法从一个 ...

  4. Django笔记 —— 模板高级进阶

    最近在学习Django,打算玩玩网页后台方面的东西,因为一直很好奇但却没怎么接触过.Django对我来说是一个全新的内容,思路想来也是全新的,或许并不能写得很明白,所以大家就凑合着看吧- 本篇笔记(其 ...

  5. 自学MVC开发基础

    由于现在面试需求,我必须有点了解MVC开发基础,MVC是一个开发框架或者是一个开发模式,MVC让软件开发的过程大致切割成三个单元,分别是:Model(模型).View(试图).Controller(控 ...

  6. 杜绝网上压根没测过就乱写之 《oracle mybatis 返回自增主键 》

    面试过好多人,包括自己也属于这么一个情况: 遇到问题直接去网上查,一般都可以查到解决方案.其中也包括一些基本的面试资料的答案. 其实有很多答案也都是正确的,但是还是存在一些压根就是胡乱抄来的答案,也不 ...

  7. 参加2018之江杯全球人工智能大赛 :视频识别&问答(四)

    很遗憾没有在规定的时间点(2018-9-25 12:00:00)完成所有的功能并上传数据,只做到写了模型代码并只跑了一轮迭代,现将代码部分贴出. import keras from keras.lay ...

  8. 测试理论--branch testing and boundary testing

    1 branch testing 分支测试 测试代码的所有分支 2 boundary testing 测试 程序的限制条件

  9. Android Service 服务(三)—— bindService与remoteService

    (转自:http://blog.csdn.net/ithomer/article/details/7366396)   一.bindService简介 bindService是绑定Service服务, ...

  10. 软工实践Beta冲刺(5/7)

    队名:起床一起肝活队 组长博客:博客链接 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去两天完成了哪些任务 描述: 1.界面的修改与完善 展示GitHub当日代码/文档签入记 ...