详解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 相关文章推荐
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 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
php实现12306余票查询、价格查询示例
2014/04/17 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
PHP模块化安装教程
2016/06/01 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
如何在PHP中使用数组
2020/06/09 PHP
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
javascript 解析url的search方法
2010/02/09 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
bootstrap table表格插件使用详解
2017/05/08 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
Python 开发Activex组件方法
2009/11/08 Python
python 调用钉钉机器人的方法
2019/02/20 Python
python Django 创建应用过程图示详解
2019/07/29 Python
简单了解python变量的作用域
2019/07/30 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
领导检查欢迎词
2014/01/14 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
小学运动会班级口号
2014/06/09 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
个人借款协议书范本
2014/11/17 职场文书
幼师辞职信范文
2015/02/27 职场文书
入团介绍人意见范文
2015/06/04 职场文书
开网店计划分析
2019/07/30 职场文书
MySQL去除密码登录告警的方法
2022/04/20 MySQL
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS