JavaScript中ES6 Babel正确安装过程


Posted in Javascript onJuly 18, 2016

本文介绍Babel6.x的安装过程~首先呢,可以使用Babel在线转换 https://babeljs.io/repl/

JavaScript中ES6 Babel正确安装过程

然后进入主题:安装Babel(命令行环境,针对Babel6.x版本)

1、首先安装babel-cli(用于在终端使用babel)

npm install -g babel-cli

2、然后安装babel-preset-es2015插件

npm install --save babel-preset-es2015

注:Babel5版本默认包含各种转换插件,然而Babel6.x相关转换插件需要自己下载,如transform-es2015-arrow-functions、transform-es2015-classes等,而ES2015 preset包含了所有插件。如果不安装任何插件,那么在命令行进行转换是没有任何效果的!

其中--save参数自动更新package.json文件,写进依赖项

3、在命令行输入:

babel es6.js --presets es2015

输出:

 "use strict";
[1, 2, 3].map(function (x) {

 return x * x;

});

注:后面的参数--presets es2015表示使用该插件进行编译,如果不写上转换是没有效果的。

4、插件配置

每一次都写上该参数那是很麻烦的,可以在当前目录下新建配置文件 .babelrc。

但是在windows系统中,不允许直接右键建立没有文件名的文件,可以通过cmd命令行创建:在当前文件夹打开cmd并键入命令

type nul>.babelrc

即可在当前目录下建立文件.babelrc,接着在文件中写入:

 {
 "presets": ['es2015']
 }

那么就可以直接在命令行中使用babel es6.js进行转换而无需添加表明所用插件的参数

除了建立.babelrc文件之外,也可在package.json中进行配置,添加以下属性即可:

"babel": {
"presets": ["es2015"]
}

附Babel常用命令:

1、转换es6.js文件并在当前命名行程序窗口中输出

babel es6.js

2、将es6.js转换后输出到es5.js文件中(使用 -o 或 --out-file )

babel es6.js -o es5.js

babel es6.js --out-file es5.js

3、实时监控es6.js一有变化就重新编译(使用 -w 或 --watch )

babel es6.js -w --out-file es5.js

babel es6.js --watch --out-file es5.js

4、编译整个src文件夹并输出到lib文件夹中(使用 -d 或 --out-dir )

babel src -d lib

babel src --out-dir lib

5、编译整个src文件夹并输出到一个文件中

babel src --out-file es5.js

6、直接输入babel-node命令,可以在命令行中直接运行ES6代码

babel-node

以上所述是小编给大家介绍的JavaScript中ES6 Babel正确安装过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
深入理解JS正则表达式---分组
Jul 18 #Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 #Javascript
简单的JS轮播图代码
Jul 18 #Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 #Javascript
Bootstrap零基础学习第一课之模板
Jul 18 #Javascript
深入分析javascript中的错误处理机制
Jul 17 #Javascript
javascript正则表达式中分组详解
Jul 17 #Javascript
You might like
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php checkbox 取值详细说明
2010/08/19 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
Ext.MessageBox工具类简介
2009/12/10 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
Angular2自定义分页组件
2017/04/19 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python操作csv文件实例详解
2017/07/31 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
营业员实习自我鉴定
2013/12/07 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
大班下学期个人总结
2015/02/13 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis
关于mysql中string和number的转换问题
2022/06/14 MySQL