使用Babel将单独的js文件 中的 ES6转码为ES5
如果你并没有接触过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的更多相关文章
- ASP.NET MVC 中单独的JS文件中获取Controller中设定的值
1,在Controller中的Action 中将指定值写上. // // GET: /Home/ public ActionResult Index() ...
- Vue在单独引入js文件中使用ElementUI的组件
Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...
- window.location.href 放置在单独的JS文件中使用时问题
场景:假设当前浏览器地址栏的地址是:http://localhost:8888/SSHBoot/tourist/homeMainAction_signInUI.do, 现在我想在点击按钮时定位到“ht ...
- nuxtjs如何在单独的js文件中引入store和router
nuxtjs里面集成vuex的创建方式改变了,并且官方不建议以导出Vuex实例的方式创建store,并且会在nuxt3里面删除.这样就会存在一个问题,我怎么像普通vue spa项目一样直接 impor ...
- js文件中函数前加分号和感叹号是什么意思?
本文转自:http://blog.csdn.net/h_o_w_e/article/details/51388500 !function(){}(); !有什么用? 从语法上来开,JavaScri ...
- 如何在js文件中实现获取request.getCotextPath();
我们在jsp中可以方便的使用“request.getCotext()”来获取工程的根目录. 但是如果我们的js代码存在一个单独的js文件中,这时候再想获取根目录,我们就要自己截取了.可以采用下面的方式 ...
- JS文件中的中文在网页引用时显示乱码的简单解决方式
今天把一个jquery方法从前台cshtml文件转移到单独的js文件中后执行不成功,调试发现if判断中的中文字符串变成了乱码,之前在前台文件中是可以正常显示的,所以判定可能是跟文件的编码方式有关系. ...
- js文件中使用el表达式问题
作者:Sang 单独js文件不能用el表达式. 首先,JSP是由服务端执行的,EL表达式自然也由服务端解析执行,因此如果EL所在的脚本在JSP页面内,它是可以获取到值的,这个值在服务器端返回到浏览器端 ...
- js文件中如何使用 获取EL表达式的值
转: js文件中如何使用 获取EL表达式的值 原先做法是在jsp页面引入头文件 <%@ page language="java" pageEncoding="UTF ...
随机推荐
- 2.1 maven配置多镜像地址
背景: 自己在平时写项目用的是阿里的镜像地址,而在开发公司的项目是用的是公司提供的镜像地址,这就导致了每次使用的时候 都需要来回的修改maven的settings.xml文件,这样很容易出错,而且还浪 ...
- (转)如何在maven的pom.xml中添加本地jar包
转载自: https://www.cnblogs.com/lixuwu/p/5855031.html 1 maven本地仓库认识 maven本地仓库中的jar目录一般分为三层:图中的1 2 3分别如下 ...
- Jenkins 配置邮件通知步骤
Jenkins 配置邮件通知前言 可以在Jenkins 中配置邮件通知,比如在构建失败时发送邮件通知项目组来及时修复问题. Jenkins 邮件通知功能的插件主要包括: Mailer Plugin ( ...
- iOS权限申请
<!-- 相册 --> <key>NSPhotoLibraryUsageDescription</key> <string>App需要您的同意,才能访问 ...
- win10无法搜索本地文件,修复方法?
win10无法搜索本地文件,实在太不方便了,网上查了一圈没几个方法有效的,筛选出来2个成功解决的问题,具体是哪个起到作用,不太清楚,都放上来,大家自行选择! 方法1:按“Windows+ X”后选择“ ...
- 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 ...
- iframe之间的postMessage传参
1.传参 function IframeClose() { var obj = {method: "iframeClose"}; window.parent.postMessage ...
- RTK与差分测量的区别
差分GPS定位原理 它使用一台 GPS基准接收机(基准站)和一台用户接收机(移动站),利用实时或事后处理技术,就可以使用户测量时消去公共的误差源 —卫星轨道误差.卫星钟差.大气延时.多路径效应.特别提 ...
- SQL合并
SELECT idName,SUM(Money),SUM(Revenue)FROM ( SELECT agentID AS idName,SUM(totalMoney) AS Money,0 A ...
- 【问题记录】MyBatis查询数据库返回多个不同类型参数的结果集的接收方式
其实是个非常简单的问题,但是这玩意儿弄得我很难受,又浪费了一个下午的时间,简直了…… 问题大概是,我在查询数据库时,查询的结果有两个,一个是varchar格式的字段,一个int格式字段,例如: sel ...