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 相关文章推荐
写js时遇到的一些小问题
Dec 06 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
js实现日期级联效果
Jan 23 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
es6数值的扩展方法
Mar 11 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
浅谈node.js中间件有哪些类型
Apr 29 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面向对象public private protected 访问修饰符
2013/06/30 PHP
php时间戳转换的示例
2014/03/31 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
js数据类型检测总结
2018/08/05 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
vue中activated的用法
2021/01/03 Vue.js
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现二分查找与bisect模块详解
2017/01/13 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
使用python实现接口的方法
2017/07/07 Python
python构建基础的爬虫教学
2018/12/23 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
交通事故委托书范本(2篇)
2014/09/21 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis