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 相关文章推荐
location.href语句与火狐不兼容的问题
Jul 04 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
canvas实现弧形可拖动进度条效果
May 11 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 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
php中mysql模块部分功能的简单封装
2011/09/30 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
django 常用orm操作详解
2017/09/13 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
python上selenium的弹框操作实现
2020/07/13 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
详解Canvas事件绑定
2018/06/27 HTML / CSS
总经理办公室主任岗位职责
2013/11/12 职场文书
自荐书封面下载
2013/11/29 职场文书
文科教师毕业的自我评价
2014/01/16 职场文书
部队党性分析材料
2014/02/16 职场文书
反邪教标语
2014/06/23 职场文书
销售人才自我评价范文
2014/09/27 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
辞职信怎么写?
2019/05/21 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python