详解如何使用babel进行es6文件的编译

 更新时间:2018年05月29日 14:29:15   作者:suwu150  
这篇文章主要介绍了详解如何使用babel进行es6文件的编译,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

1.babel

babel官方网址

2. 安装

npm i babel-cli -g 

通过上面命令进行babel的安装,其中i表示安装install的意思, -g表示安装到全局

3.使用

创建文件es6.js

let num = [1,2,3,4]; 
let plusDouble = num.map(item => item * 2); 
console.log(plusDouble); 

然后使用命令进行编译:

babel es6.js -o compiled.js 

然后就会在当前目录下出现编译之后的文件,就这样,我们完成了编译的过程,但是,当我们进行运行编译之后的文件时,仍然会报错,其实主要原因是上面的编译没有加约束条件,也就是没有告诉babel去怎么编译,那下面我们就进行对babel进行配置

4. 配置

(1)通过文件配置

在项目目录下创建文件.babelrc,在文件中书写如下代码:,由于babel是通过插件的形式进行使用,所以在下面代码中通过添加对象预设和插件

{ 
 "presets": [], 
 "plugins": [] 
} 

安装插件,在下面这个插件的使用,可以将ES6代码编译为ES5代码:

npm i --save-dev babel-preset-es2015 

(代码中--save-dev代表安装在本地开发依赖中)

然后将.babelrc中的文件进行修改为以下内容: 

{ 
 "presets": ["es2015"], 
 "plugins": [] 
} 

至此,我们已經配置完成,运行编译命令即可得到下面的结果: 

"use strict";  
var num = [1, 2, 3, 4]; 
var plusDouble = num.map(function (item) { 
 return item * 2; 
}); 
console.log(plusDouble); 

运行之后能够正常打印结果

现在我们能够进行简单的编译,但是对于一些es7里边的新特性还是有点限制,这样,我们就的使用插件进行编译,如下面所示对象展开符插件object-rest-spread,同样的,我们使用命令进行安装

npm i babel-plugin-transform-object-rest-spread --save-dev 

同样进行到插件中修改

{ 
 "presets": ["es2015"], 
 "plugins": ["transform-object-rest-spread"] 
} 

然后通过代码进行测试,在代码中书写如下内容(...为ES7中预先提出的设想):

let courses = { name: 'english', score: 90}; 
courses = { ...courses, comment: 'A'}; 
console.log(courses); 

编译之后的结果为:

'use strict';  
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };  
var courses = { name: 'english', score: 90 }; 
courses = _extends({}, courses, { comment: 'A' }); 
console.log(courses); 

通过添加_extends方法将对象展开符进行转化,运行代码可正常输出结果

(2)通过在webpack配置文件中进行其他属性的加载配置

在webpack中,我们能够通过各类加载器进行样式的加载,在使用样式加载的时候,通过下面链接进行查看:https://www.jb51.net/article/141096.htm

以上就是babel编译es6文件的方法,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 纯javascript移动优先的幻灯片效果

    纯javascript移动优先的幻灯片效果

    这篇文章主要介绍了纯javascript实现移动优先的幻灯片效果,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript 自定义事件之我见

    JavaScript 自定义事件之我见

    事件就是用户和浏览器交互的一种途径,在本例中我们的代码逻辑一般就是收集用户填写信息,验证信息合法性,利用AJAX与服务器交互,需要的朋友可以参考下
    2017-09-09
  • 微信小程序动态显示项目倒计时效果

    微信小程序动态显示项目倒计时效果

    这篇文章主要为大家详细介绍了微信小程序动态显示项目倒计时,格式如4天7小时58分钟39秒,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 用js写“算24”游戏的思路分析与实现代码

    用js写“算24”游戏的思路分析与实现代码

    “算24”是一种游戏,小时候玩过,就是一副扑克,把大王,小王除掉,A算1点J,Q,K都算10点。任意抽4个牌,可以运用+-*/()来进行运算,把最后结果等于24。
    2008-05-05
  • DOM 事件的深入浅出(二)

    DOM 事件的深入浅出(二)

    本文主要讲解了DOM事件中Event对象的常用属性和方法,同时也介绍了其在IE中的兼容性问题及解决方案。希望对大家有所帮助
    2016-12-12
  • 可自定义速度的js图片无缝滚动示例分享

    可自定义速度的js图片无缝滚动示例分享

    这篇文章主要介绍了非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,大家参考使用吧
    2014-01-01
  • JavaScript如何利用Promise控制并发请求个数

    JavaScript如何利用Promise控制并发请求个数

    大家都知道js是单线程,并不存在真正的并发,但是由于JavaScript的Event Loop机制,使得异步函数调用有了“并发”这样的假象。这篇文章主要给大家介绍了关于JavaScript如何利用Promise控制并发请求个数的相关资料,需要的朋友可以参考下
    2021-05-05
  • js使用i18n实现页面国际化的方法

    js使用i18n实现页面国际化的方法

    本篇文章主要介绍了js使用i18n实现页面国际化的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 解决前端接收 type:"application/octet-stream" 格式的数据并下载(解决后端返回不唯一问题)

    解决前端接收 type:"application/octet-stream" 格

    前端接收 type: “application/octet-stream“ 格式的数据并下载,还有后端既返回octet-stream还返回JSON数据时的处理方法,今天给大家分享前端接收 type:"application/octet-stream" 格式的数据并下载(解决后端返回不唯一问题)的解决方案,感兴趣的朋友一起看看吧
    2023-12-12
  • Js获取下拉框选定项的值和文本的实现代码

    Js获取下拉框选定项的值和文本的实现代码

    本篇文章主要是对Js获取下拉框选定项的值和文本的实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02

最新评论