babel的使用及安装配置教程

 更新时间:2018年02月22日 11:50:57   作者:Z皓  
babel是一个广泛使用的转码器,可以将ES6代码转化为ES5代码,从而在现有环境执行。这篇文章主要介绍了babel的使用以及安装配置,需要的朋友可以参考下

简介

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运行,查看结果

也可以输出到指定的目录

{
 "devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-preset-es2015": "^6.24.1"
 },
 "scripts":{
   "build":"babel demo.js --out-file bunder.js"
 }
}

进入根目录,npm run build运行,查看结果

这次会在根目录下找到被编译过的bunder.js文件

文件夹截图

总结

以上所述是小编给大家介绍的babel的使用及安装配置教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • javascript 事件处理示例分享

    javascript 事件处理示例分享

    这篇文章主要介绍了javascript 事件处理示例分享,需要的朋友可以参考下
    2014-12-12
  • 九种原生js动画效果

    九种原生js动画效果

    这篇文章主要介绍了九种原生js动画效果,个个都非常精彩,都值得大家学习,需要的朋友可以参考下
    2015-11-11
  • 通过实例讲解JS如何防抖动

    通过实例讲解JS如何防抖动

    这篇文章主要介绍了通过实例讲解JS如何防抖动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • 原生JS和JQuery动态添加、删除表格行的方法

    原生JS和JQuery动态添加、删除表格行的方法

    这篇文章主要介绍了原生JS和JQuery动态添加、删除表格行的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下
    2015-05-05
  • React父子组件间的传值的方法

    React父子组件间的传值的方法

    在单页面里面,父子组件传值是比较常见的,这篇文章主要介绍了React父子组件间的传值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • BootStrap给table表格的每一行添加一个按钮事件

    BootStrap给table表格的每一行添加一个按钮事件

    这篇文章主要介绍了BootStrap给table表格的每一行添加一个按钮事件的相关资料,需要的朋友可以参考下
    2017-09-09
  • 30分钟精通React今年最劲爆的新特性——React Hooks

    30分钟精通React今年最劲爆的新特性——React Hooks

    这篇文章主要介绍了30分钟精通React今年最劲爆的新特性——React Hooks,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 微信小程序实现手势滑动卡片效果

    微信小程序实现手势滑动卡片效果

    这篇文章主要为大家详细介绍了微信小程序实现手势滑动卡片效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • JS中移除非数字最多保留一位小数

    JS中移除非数字最多保留一位小数

    这篇文章主要介绍了JS中移除非数字最多保留一位小数的实现代码,文章给大家提到了js处理数字保留2位小数,强制保留2位小数不够补上.00的完整代码,感兴趣的朋友一起看看吧
    2018-05-05
  • JavaScript私有变量实例详解

    JavaScript私有变量实例详解

    这篇文章主要介绍了JavaScript私有变量,结合实例形式分析了javascript私有变量的常见定义及访问方法,需要的朋友可以参考下
    2019-01-01

最新评论