您现在的位置是: Home> 学无止境> WEB前端> WEB前端

Babel工具将es6转换成es5

张伟江2019-01-23 17:47WEB前端140人已围观

1、npm安装相关依赖

// ES2015转码规则
cnpm install --save-dev babel-preset-es2015
// react转码规则
cnpm install --save-dev babel-preset-react
ES7不同阶段语法提案的转码规则
cnpm install --save-dev babel-preset-stage-2
// babel命令行
cnpm install --global babel-cli

 2、根目录新建.babelrc文件,windows下创建.babelrc文件会提示出错,可通过doc窗口mkdir .babelrc创建。写如下内容

{
  "presets": [
    "es2015",
    "react",
    "stage-2"
  ],
  "plugins": []
}

3、新建es6.js,写下如下内容

//需引入browser-polyfill.min.js,不然ie11是undifined,ie10及以下直接报错
var m = new Map([['micheal',99],['bob',90],['baobao',100]]);
alert(m.get('micheal'));

//在不引入browser.min.js时候只兼容ie11
let a= 3;
alert(a);

//在不引入browser.min.js时候ie11也不兼容
var log = () => {
    alert('no param')
}
log();

$.ajax({
    type:"post",
    url:"XXX.com",
    dataType:"json",
    success:function(data){
        var str = `<div>
                  <p class="name">${data.name}</p>
              </div>`;
    $('#body').append(str);
    }
});


4、命令行执行

babel example.js -o compiled.js
生成如下内容

'use strict';

//需引入browser-polyfill.min.js,不然ie11是undifined,ie10及以下直接报错
var m = new Map([['micheal', 99], ['bob', 90], ['baobao', 100]]);
alert(m.get('micheal'));

//在不引入browser.min.js时候只兼容ie11
var a = 3;
alert(a);

//在不引入browser.min.js时候ie11也不兼容
var log = function log() {
    alert('no param');
};
log();

$.ajax({
    type: "post",
    url: "XXX.com",
    dataType: "json",
    success: function success(data) {
        var str = '<div>\n                  <p class="name">' + data.name + '</p>\n              </div>';
        $('#body').append(str);
    }
});
如果想es6语法兼容浏览器但是又不想转换es5可通过browser-polyfill.min.js和browser.min.js实现,但是不推荐,ie8及以下还是不兼容,详情见github示例:https://github.com/zhangweijiang/gulp/tree/master/es6

- END -

Babel  
点赞(0) 打赏

文章评论 共有 0 条评论

暂无评论

站点信息

  • 建站时间:2018年10月24日
  • 网站程序:fastadmin
  • 文章统计67篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 网站地图XML网站地图
  • 微信公众号:扫描二维码,关注我们

打赏本站

  • 如果你觉得本站很棒,可以通过扫码支付打赏哦!
  • 微信扫码:你说多少就多少~
  • 支付宝扫码:你说多少就多少~

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部