详解javascript中的babel到底是什么


Posted in Javascript onJune 21, 2018

javascript在不断的发展,各种新的标准和提案层出不穷,但是由于浏览器的多样性,导致可能几年之内都无法广泛普及,babel可以让你提前使用这些语言特性,他是一种用途很多的javascript编译器,他把最新版的javascript编译成当下可以执行的版本,简言之,利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6,甚至es7的语法。说白了就是把各种javascript千奇百怪的语言统统专为浏览器可以认识的语言。

新建项目:npm init

安装babel-cli:npm i babel-cli --save-dev

新建一个文件index.js

let numbers = [1,2,3];
let dou = numbers.map((number)=>number*2);
console.log(dou);

这是es6最新的语法,map遍历数组并输出

然后用babel来编译这段代码,不编译,直接运行,可能会报错,编译成标准的js语言compiled.js

babel index.js -o compiled.js

项目中自动生成compiled.js

打开compiled.js 文件,发现并没有起作用,相当于复制过来了,其实我们在在用babel的时候是需要配置文件泪完成编译的,

新建配置.babelrc文件

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

下面来一个预设,它可以把es6的代码编译为es5

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

安装完后把这插件配置到.babelrc文件

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

再次运行编译

打开compiled.js文件

变了

var numbers = [1, 2, 3];
var dou = numbers.map(function (number) {
 return number * 2;
});
console.log(dou);

接下来在编译一段es7的代码,es7编译为es5

我们需要一个插件来完成

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

然后把这个插件配置到.babelrc文件中去

{
  "plugins":["transform-object-rest-spread"],
  "presets":["es2015"]
}
let mike = {name:'mike',age:40};
mike={...mike,sex:'男'};
console.log(mike);

然后运行编译命令

打开compiled.js

'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 mike = { name: 'mike', age: 40 };
mike = _extends({}, mike, { sex: '男' });
console.log(mike);

这个插件启示就是添加了一个_extends方法来完成这个功能

总结:

babel的核心概念就是利用一系列的plugin来管理编译案列,通过不同的plugin,他不仅可以编译es6的代码,还可以编译react JSX语法或者别的语法,甚至可以使用还在提案阶段的es7的一些特性,这就足以看出她的可扩展性。在以后的博客,会介绍他和webpack,react如何共同创建一个完美的开发环境。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 Javascript
webpack打包react项目的实现方法
Jun 21 #Javascript
Vue Router的懒加载路径的解决方法
Jun 21 #Javascript
详解如何使用webpack打包JS
Jun 21 #Javascript
vue自定义一个v-model的实现代码
Jun 21 #Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 #Javascript
浅析Vue 生命周期
Jun 21 #Javascript
vue数组对象排序的实现代码
Jun 20 #Javascript
You might like
8个出色的WordPress SEO插件收集
2011/02/26 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
php数据访问之增删改查操作
2016/05/09 PHP
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
为什么group by 和order by会使查询变慢
2014/05/16 面试题
EJB实例的生命周期
2016/10/28 面试题
超市5.1促销活动
2014/01/15 职场文书
西门豹教学反思
2014/02/04 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
陪护人员误工证明
2015/06/24 职场文书
参加招聘会后的感想
2015/08/10 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
Python实现对齐打印 format函数的用法
2022/04/28 Python
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技