babel的使用及安装配置教程


Posted in Javascript onFebruary 22, 2018

简介

babel是一个广泛使用的转码器,可以将ES6代码转化为ES5代码,从而在现有环境执行,这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持。

安装及配置

npm install babel-cli --save-dev 或者 cnpm install babel-cli --save-dev使用淘宝镜像安装会更快。

步骤:进入项目 ==>cnpm install babel-cli --save-dev

为什么不安装在全局

如果安装在全局,那意味着项目要运行,全局环境必须有bable,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的babel。

设定转码规则

根目录下安装:cnpm install babel-preset-es2015 --save-dev

安装完成之后,再创建配置文件 .babelrc这个文件,得放在项目根目录下,它的基本格式是:

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

presets字段设置的就是转码规则,plugins是设置的babel的插件。然后配置文件:

{
  "presets":["es2015"]
}

到这里,关于babel的基本配置就完成了。

实例演示:

在项目根目录下创建demo.js

let a = 5;
const b = 10;
let input = [1,2,3];
input.map(item => item+1);

因为我们现在是将babel安装到了当前目录下,所以不能直接在终端中babel转换命令,得使用npm来运行,所以先在packge.json中编写

{
 "devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-preset-es2015": "^6.24.1"
 },
 "scripts":{
   "build":"babel demo.js"
 }
}

进入根目录,npm run build运行,查看结果

babel的使用及安装配置教程

也可以输出到指定的目录

{
 "devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-preset-es2015": "^6.24.1"
 },
 "scripts":{
   "build":"babel demo.js --out-file bunder.js"
 }
}

进入根目录,npm run build运行,查看结果

babel的使用及安装配置教程

这次会在根目录下找到被编译过的bunder.js文件

文件夹截图

babel的使用及安装配置教程

总结

以上所述是小编给大家介绍的babel的使用及安装配置教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript document.execCommand() 常用解析
Dec 14 Javascript
jQuery each()小议
Mar 18 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
Element InputNumber 计数器的实现示例
Aug 03 Javascript
Javascript实现打鼓效果
Jan 29 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 #Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 #Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 #Javascript
babel之配置文件.babelrc入门详解
Feb 22 #Javascript
javascript填充默认头像方法
Feb 22 #Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 #Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 #Javascript
You might like
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
相对路径转化成绝对路径
2007/04/10 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
小谈angular ng deploy的实现
2020/04/07 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
德国网上花店:Valentins
2018/08/15 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
新闻工作者先进事迹
2014/05/26 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
财务人员个人工作总结
2015/02/27 职场文书
离婚民事起诉状
2015/08/03 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
简单谈谈Python面向对象的相关知识
2021/06/28 Python