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 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
js单例模式的两种方案
Oct 22 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 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和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
python del()函数用法
2013/03/24 Python
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
python将ip地址转换成整数的方法
2015/03/17 Python
python实现决策树分类算法
2017/12/21 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
Python I/O与进程的详细讲解
2019/03/08 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
微博营销计划书
2014/01/10 职场文书
2014小学年度工作总结
2014/12/20 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python