如果你并没有接触过ES6,当你看到下面的代码时,肯定是有点懵逼的(这是什么鬼?心中一万头神兽奔腾而过),但是你没看错,这就是ES6。不管你看不看它,它都在这里。

1
2
3
4
5
6
7
8
9
10
var a = (msg) => () => msg;
 
var bobo = {
  _name: "BoBo",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
};

实际上,上面的这段代码通过Babel转换后,会变成:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
"use strict";
 
var a = function a(msg) {
  return function () {
    return msg;
  };
};
 
var bobo = {
  _name: "BoBo",
  _friends: [],
  printFriends: function printFriends() {
    var _this = this;
 
    this._friends.forEach(function (f) {
      return console.log(_this._name + " knows " + f);
    });
  }
};

好,言归正传,我们尝试下用一些方法来实现上面的转码效果吧。

1、直接安装Babel法:

1.1) 首先全局安装Babel。

1
2
3
4
5
$ npm install -g babel-cli
 
//也可以通过直接将Babel安装到项目中,在项目根目录下执行下面命令,同时它会自动在package.json文件中的devDependencies中加入babel-cli
//在执行安装到项目中命令之前,要先在项目根目录下新建一个package.json文件。
$ npm install -g babel-cli --save-dev

如果将babel直接安装到项目中,它会自动在package.json文件中的devDependencies中加入babel-cli。如下所示:

1
2
3
4
5
6
//......
{
  "devDependencies": {
    "babel-cli": "^6.22.2"
  }
}

1.2) Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。

这个文件的完整文件名是 “.babelrc”,注意最前面是有个“.”的。如果老是提示 “必须键入文件名” 的错误,把文件名改成“.babelrc.”,注意是前后都有一个点,这样就可以保存成功了

1
2
3
4
{
  "presets": [],
  "plugins": []
}

1.3) presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。

点击此处到Babel中文官网presets配置页面:Babel Plugins

1
2
3
4
5
6
7
8
9
10
11
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
 
# react转码规则
$ npm install --save-dev babel-preset-react
 
# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

1.4) 根据官网的提示,当我们用npm安装好这些插件工具之后,我们需要将这些规则加入到.babelrc中去。如下所示:

1
2
3
4
5
6
7
8
{
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

1.5) 转码、转码的规则:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 转码结果输出到标准输出
$ babel test.js
 
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel a.js --out-file b.js
# 或者
$ babel a.js -o b.js
 
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib
 
# -s 参数生成source map文件
$ babel src -d lib -s

我这里只是使用了es2015转码规则,测试代码截图如下图

使用Babel将单独的js文件 中的 ES6转码为ES5的更多相关文章

  1. ASP.NET MVC 中单独的JS文件中获取Controller中设定的值

    1,在Controller中的Action 中将指定值写上.       //       // GET: /Home/       public ActionResult Index()       ...

  2. Vue在单独引入js文件中使用ElementUI的组件

    Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...

  3. window.location.href 放置在单独的JS文件中使用时问题

    场景:假设当前浏览器地址栏的地址是:http://localhost:8888/SSHBoot/tourist/homeMainAction_signInUI.do, 现在我想在点击按钮时定位到“ht ...

  4. nuxtjs如何在单独的js文件中引入store和router

    nuxtjs里面集成vuex的创建方式改变了,并且官方不建议以导出Vuex实例的方式创建store,并且会在nuxt3里面删除.这样就会存在一个问题,我怎么像普通vue spa项目一样直接 impor ...

  5. js文件中函数前加分号和感叹号是什么意思?

    本文转自:http://blog.csdn.net/h_o_w_e/article/details/51388500 !function(){}();   !有什么用? 从语法上来开,JavaScri ...

  6. 如何在js文件中实现获取request.getCotextPath();

    我们在jsp中可以方便的使用“request.getCotext()”来获取工程的根目录. 但是如果我们的js代码存在一个单独的js文件中,这时候再想获取根目录,我们就要自己截取了.可以采用下面的方式 ...

  7. JS文件中的中文在网页引用时显示乱码的简单解决方式

    今天把一个jquery方法从前台cshtml文件转移到单独的js文件中后执行不成功,调试发现if判断中的中文字符串变成了乱码,之前在前台文件中是可以正常显示的,所以判定可能是跟文件的编码方式有关系. ...

  8. js文件中使用el表达式问题

    作者:Sang 单独js文件不能用el表达式. 首先,JSP是由服务端执行的,EL表达式自然也由服务端解析执行,因此如果EL所在的脚本在JSP页面内,它是可以获取到值的,这个值在服务器端返回到浏览器端 ...

  9. js文件中如何使用 获取EL表达式的值

    转: js文件中如何使用 获取EL表达式的值 原先做法是在jsp页面引入头文件 <%@ page language="java" pageEncoding="UTF ...

随机推荐

  1. 2.1 maven配置多镜像地址

    背景: 自己在平时写项目用的是阿里的镜像地址,而在开发公司的项目是用的是公司提供的镜像地址,这就导致了每次使用的时候 都需要来回的修改maven的settings.xml文件,这样很容易出错,而且还浪 ...

  2. (转)如何在maven的pom.xml中添加本地jar包

    转载自: https://www.cnblogs.com/lixuwu/p/5855031.html 1 maven本地仓库认识 maven本地仓库中的jar目录一般分为三层:图中的1 2 3分别如下 ...

  3. Jenkins 配置邮件通知步骤

    Jenkins 配置邮件通知前言 可以在Jenkins 中配置邮件通知,比如在构建失败时发送邮件通知项目组来及时修复问题. Jenkins 邮件通知功能的插件主要包括: Mailer Plugin ( ...

  4. iOS权限申请

    <!-- 相册 --> <key>NSPhotoLibraryUsageDescription</key> <string>App需要您的同意,才能访问 ...

  5. win10无法搜索本地文件,修复方法?

    win10无法搜索本地文件,实在太不方便了,网上查了一圈没几个方法有效的,筛选出来2个成功解决的问题,具体是哪个起到作用,不太清楚,都放上来,大家自行选择! 方法1:按“Windows+ X”后选择“ ...

  6. Exception in thread "main" SettingsException[Failed to load settings from [elasticsearch.yml]]; nested: ElasticsearchParseException[malformed, expected end of settings but encountered additional conte

    D:\elasticsearch\elasticsearch-2.4.0\bin>elasticsearchException in thread "main" Settin ...

  7. iframe之间的postMessage传参

    1.传参 function IframeClose() { var obj = {method: "iframeClose"}; window.parent.postMessage ...

  8. RTK与差分测量的区别

    差分GPS定位原理 它使用一台 GPS基准接收机(基准站)和一台用户接收机(移动站),利用实时或事后处理技术,就可以使用户测量时消去公共的误差源 —卫星轨道误差.卫星钟差.大气延时.多路径效应.特别提 ...

  9. SQL合并

     SELECT   idName,SUM(Money),SUM(Revenue)FROM ( SELECT agentID AS idName,SUM(totalMoney) AS Money,0 A ...

  10. 【问题记录】MyBatis查询数据库返回多个不同类型参数的结果集的接收方式

    其实是个非常简单的问题,但是这玩意儿弄得我很难受,又浪费了一个下午的时间,简直了…… 问题大概是,我在查询数据库时,查询的结果有两个,一个是varchar格式的字段,一个int格式字段,例如: sel ...