详解如何使用babel进行es6文件的编译
作者:suwu150 发布时间:2024-08-05 14:52:40
标签: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配置文件中进行其他属性的加载配置
来源:https://blog.csdn.net/suwu150/article/details/77198968


猜你喜欢
- 前言上一次简单了解了协程的工作原理 前文链接最后提到了几个使用协程时会遇到的问题,其中一个就是主线程不会等待子线程结束,在这里记录两种比较简
- 一、Hive介绍hive: 由 Facebook 开源用于解决海量结构化日志的数据统计工具。Hive 是基于 Hadoop 的一个数据仓库工
- 文件的io操作的缓冲行为分为全缓冲:同系统及磁盘块大小有关,n个字节后执行一次写入操作行缓冲:遇到换行符执行一次写操作无缓冲:立刻执行写操作
- python pyinstaller pyqt4 打包 QWindows最近在做课设,用pyqt设计界面。然后用pyinstaller打包程
- 如下所示:def findSmallest(arr): smallest = arr[0]#将第一个元素的值作为最小值赋给smallest
- 实例如下:import os if __name__ == "__main__": file_path =
- 注:本文的所有数据请移步—— 参考数据一、水平堆叠图堆叠图其实就是柱状图的一种特殊形式fr
- 将数据插入到MySQL表,需要使用SQL INSERT INTO命令。可以将数据插入到MySQL表使用mysql>提示符下或使用任何脚
- 今天写JS代码,遇到动态生成多个名称相同的input复选按钮需要判断其是否是数组,用到了if (typeof(document.MapChe
- SQL Server 客户端配置工具用于配置客户端的工具(除基于DOS操作系统的客户端工具以外),以便使它们可以成功地和SQL Server
- 代码如下:<% set rs=server.createobject("adodb.recordset&
- 前言在前程无忧上投递简历发现有竞争力分析,免费能看到匹配度评价和综合竞争力分数,可以做投递参考计算方式综合竞争力得分应该越高越好,匹配度评语
- 今天我们用python和python的工具包pygame来编写一个贪吃蛇的小游戏贪吃蛇游戏功能介绍贪吃蛇的游戏规则如下:通过上下左右键或者W
- 目录一、网址分析二、代码编写三、遇到的问题1. 获取评论的时候也将子评论爬虫进去了。2. 获取全部评论数,直接通过 requests 获取不
- 1. 安装pip3yum install python34-pip2. 安装python34develyum install python3
- 导语在大多数开发需求中,我们有时需要将某个数据,或者某个函数方法,挂载到,全局实例身上,以便于,在项目全局的任何位置都能够调用其方法,或读取
- 这里提供在使用python进行开发中常使用到的方法技巧,如有不对欢迎批评指正。要点:开发中类、变量特性查询,类型就是类,断言的使用,深浅复制
- 在Dreamweaver4中,你可以存储你自己设定的图片、链接、flash影片、颜色表、模板等等,组成这个站点的资产,这就是Assets面板
- 以下为引用的内容:DROP PROCEDURE test_insert ;DELIMITER ;;CREATE PROCEDURE test
- 六步安装Mysql(免安装包的才可以选安装位置),供大家参考,具体内容如下第一步:下载MySQL压缩包mysql下载路径直接点击链接也可以下