详解设置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中单选框和复选框获取值的方式
Nov 06 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
jquery实现页面加载效果
Feb 21 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 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
一个简单的PHP投票程序源码
2007/03/11 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
mac下安装nginx和php
2013/11/04 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
Firefox div高度自适应
2009/04/28 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
Python内置数据类型详解
2014/08/18 Python
python实现斐波那契递归函数的方法
2014/09/08 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
python中map()与zip()操作方法
2016/02/27 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
Python简单实现控制电脑的方法
2018/01/22 Python
Python pymongo模块用法示例
2018/03/31 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
Python中常用的内置方法
2019/01/28 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
九州传奇上机题
2014/07/10 面试题
养殖行业的创业计划书
2014/01/05 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
继承权公证书
2014/04/09 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
升学宴学生答谢词
2015/01/05 职场文书
前台文员岗位职责
2015/02/04 职场文书
SQL注入详解及防范方法
2021/12/06 MySQL
MySQL分区表管理命令汇总
2022/03/21 MySQL
Python使用Web框架Flask开发项目
2022/06/01 Python