详解设置Webstorm 利用babel将ES6自动转码成ES5


Posted in Javascript onDecember 20, 2017

前言:ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。ES6的目标,是使得JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言。但是现代浏览器对ES6新特性支持度不高,所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。

今天我就来分享一下,如何配置Webstorm 利用babel将ES6自动转码成ES5。Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码,所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

1.在Webstorm 里新建一个空项目,取名为es6demo.

2..然后在根目录下面新建一个package.json,只需要写明两个属性即name和version。

详解设置Webstorm 利用babel将ES6自动转码成ES5

3.打开webstorm的终端(Terminal),快捷键为Alt+F12,安装babel-cli。也可全局安装。

或者这样打开:

详解设置Webstorm 利用babel将ES6自动转码成ES5

安装babel-cli: npm install --save-dev babel-cli

4.安装完babel-cli后,可以看到新生成了一个node_modules文件和一个package-lock.json文件,同时发现package.json文件中多出了

"devDependencies": {
"babel-cli": "^6.26.0"

}

这样一行代码,此代码说明babel-cli已安装成功,形成了依赖。

详解设置Webstorm 利用babel将ES6自动转码成ES5

5.然后再Settings->Languages & Frameworks中选择Javascript选项,同时将version版本选择为ECMAScript6即可。

详解设置Webstorm 利用babel将ES6自动转码成ES5

6.再在webstorm的终端(Terminal),安装Babel的preset以正确识别ES6代码,命令如下:

npm install --save-dev babel-preset-es2015

安装完后同时在package.json文件中会多出

"babel-preset-es2015": "^6.24.1" 这样一行代码,说明babel-preset-es2015也成功安装上了。

详解设置Webstorm 利用babel将ES6自动转码成ES5

7.在根目录下面新建一个名为.babelrc文件,内容如下:

{

 "presets": [

  "es2015"

 ]

}

8.设置File Watcher. File--settings--Tools--File Watcher。

详解设置Webstorm 利用babel将ES6自动转码成ES5

详解设置Webstorm 利用babel将ES6自动转码成ES5

9.创建一个名为test.js,在里面写es6的语法,不再报错。test-compiled.js就是编译成es5的文件,默认是严格模式。

详解设置Webstorm 利用babel将ES6自动转码成ES5

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
JavaScript常用工具函数库汇总
Sep 17 Javascript
代码详解Vuejs响应式原理
Dec 20 #Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 #Javascript
在一个页面实现两个zTree联动的方法
Dec 20 #Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 #Javascript
Angular2+如何去除url中的#号详解
Dec 20 #Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 #Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 #Javascript
You might like
一个MYSQL操作类
2006/11/16 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
php如何连接sql server
2015/10/16 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
javascript动画浅析
2012/08/30 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
nodejs更改项目端口号的方法
2018/05/13 NodeJs
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
使用python3构建文件传输的方法
2019/02/13 Python
python实现维吉尼亚算法
2019/03/20 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
乳制品整治工作方案
2014/05/29 职场文书
总经理人事任命书
2014/06/05 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
学生安全责任协议书
2016/03/22 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB