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 相关文章推荐
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
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中最容易忘记的一些知识点总结
2013/04/28 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
javascript 多级checkbox选择效果
2009/08/20 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
Python3 入门教程 简单但比较不错
2009/11/29 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
非功能性需求都包括哪些方面
2013/10/29 面试题
事业单位辞职信范文
2014/01/19 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
工作总结与自我评价
2014/09/18 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
爱心捐款感谢信
2015/01/20 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技