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 相关文章推荐
Prototype Template对象 学习
Jul 19 Javascript
jquery radio 操作代码
Mar 16 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
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
php 删除数组元素
2009/01/16 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
Python获取任意xml节点值的方法
2015/05/05 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python实现人机猜拳小游戏
2020/02/03 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
类如何去实现接口
2013/12/19 面试题
什么是唯一索引
2015/07/05 面试题
护理专业毕业生自我鉴定
2013/10/08 职场文书
仓库主管岗位职责
2014/03/02 职场文书
出纳会计岗位职责
2014/03/12 职场文书
会议主持词
2014/03/17 职场文书
安全生产月活动总结
2014/05/04 职场文书
社会学专业求职信
2014/07/17 职场文书
爱心捐款活动总结
2015/05/09 职场文书
就业意向书范本
2015/05/11 职场文书
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
解决 redis 无法远程连接
2022/05/15 Redis