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. SET UPDATE TASK LOCAL (ローカル更新 )

    ローカル更新では.更新プログラムは要求を処理したのと同じワークプロセスによって実行されます.ダイアログユーザは更新が終了するまで待ってから追加データを入力しなければなりません.データベースへのアクセス ...

  2. Centos7下lamp环境搭建的小笔记

    刚刚把校赛弄完,赛前在环境搭建上花了蛮多时间,也正好记一下笔记 0.首先更新源 清华大学开源镜像站的源 https://mirrors.tuna.tsinghua.edu.cn/help/centos ...

  3. P1016 旅行家的预算

    P1016 旅行家的预算 题目描述 一个旅行家想驾驶汽车以最少的费用从一个城市到另一个城市(假设出发时油箱是空的).给定两个城市之间的距离D1.汽车油箱的容量C(以升为单位).每升汽油能行驶的距离D2 ...

  4. Qt 实时读串口数据,并将读到的数据从网口发送出去

    需求: 1. 要试试从串口读取数据 2. 将读到的数据从网口发送出去 3.开机启动 4. 没有界面 第一部分 配置Qt Pro文件  需要Qt += serialport network 第二部分 - ...

  5. (转)简述47种Shader Map的渲染原理与制作方法

    在Shader中会使用各种不同图参与渲染,所以简单地总结下各种图的渲染原理.制作方法,最后面几种是程序生成图. 1. Albedo 2. Diffuse(Photographic) 从上图可以看出来, ...

  6. Python音频处理(一)音频基础知识-周振洋

    1.声音音频基础知识 (1)声音是由震动产生,表现为波的形式.波有频率,振幅等参数.对于声波而言:频率越大,音调越高,反之越低.振幅越大,声音越大,反之越小. (2)采样率,帧率:波是连续(无穷)的, ...

  7. 当我们在安装tensorflow时,我们在安装什么?- Intro to TF, Virtualenv, Docker, CUDA, cuDNN, NCCL, Bazel

    (Mainly quoted from its official website) Summary: 1. TensorFlow™ is an open source software library ...

  8. 前台如何处理后台返回的json数据

    后台返回的json数据格式: { "state": true, "data": { "id": 0, "name": & ...

  9. UITableView性能优化【本文摘自智车芯官网】

    UITableView是个表格视图,可以在表格行空间中添加多个子控件,UITableView继承了UIScrollView,默认状态下可以堆单元格进行滚动,所有的UITableViewControll ...

  10. 【工具学习】——教你读懂Maven的配置文件

    [前言] 最近在项目中用到了maven工具,相信很多第一次接触maven的人都有这样的困惑,maven的文件很简单,就像下图中的结构一样,但是它的功能十分强大,那是怎么做到的呢?配置文件!配置文件里是 ...