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 相关文章推荐
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
AngularJs表单验证实例详解
May 30 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 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
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
javascript 表单验证常见正则
2009/09/28 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
python使用nntp读取新闻组内容的方法
2015/05/08 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
python对json的相关操作实例详解
2017/01/04 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
python多线程分块读取文件
2019/08/29 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
python实现人脸签到系统
2020/04/13 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
人民教师求职自荐信
2014/03/12 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
使用MybatisPlus打印sql语句
2022/04/22 SQL Server