详解设置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 相关文章推荐
JS无限树状列表实现代码
Jan 11 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
JQuery工具函数汇总
Jun 15 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
代码详解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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
Javascript 强制类型转换函数
2009/05/17 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
js实现五星评价功能
2017/03/08 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
js实现电灯开关效果
2021/01/19 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
Python坐标线性插值应用实现
2019/11/13 Python
python flask搭建web应用教程
2019/11/19 Python
python模拟实现斗地主发牌
2020/01/07 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
大三预备党员入党思想汇报
2014/01/08 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
Python操作CSV格式文件的方法大全
2021/07/15 Python
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android