webstorm下ES6转ES5

ECMAScript 6是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。

ES6的目标，是使得JavaScript语言可以用来编写大型的复杂的应用程序，成为企业级开发语言。

作为一只猴子，我也想尝试一下ES6有什么新特性，于是开始了学习之路。

在webstorm写下了这段代码，体验一下ES6语法的便利，但是一大堆报错

各种语法错误

what the fuck

相信每一只程序猴都不想在这样的环境下编码，反正本猴不想

1 语法支持设置

Preferences > Languages & Frameworks > JavaScript

这里只要配置ECMAScript版本即可

配置之后

2 自动转码为ES5

file watcher + babel（ES6转码器）

你可能希望你写的代码有更好的兼容性，但目前的ES6肯定不是所有浏览器都支持的，所以我们要用到ES6转码器。

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在浏览器或其他环境执行。这意味着，你可以用ES6的方式编写程序，又不用担心现有环境是否支持。

而且你还希望每次修改代码时能自动转码，所以还要用到webstorm的file watcher（当然还有其他解决方案）

npm install -g babel
Preferences > Tools > File watchers
点击“+”按钮

file watcher配置界面

File Type：配置该监听器监听的文件类型，可以在Preferences > Editor > File types中配置

Scope：配置该监听器的监听范围，可自定义新的范围，也可以使用Preferences > Appearance & Behavior > Scopes

Program：babel的安装位置

Arguments：命令执行参数，参见Babel CLI

Working directory：babel命令执行的位置，默认为文件所在目录

这样对文件做修改会随时生成编译成ES5的文件以及sourceMap文件

时间： 2024-08-09 02:20:17

webstorm下ES6转ES5的相关文章

es6转es5

一.在没有IDE情况下的转换在"我的电脑->D盘”新建个文件夹es6,文件夹里新建一个文件es6.js. 打开命令行窗口 1.先全局安装babel-cli,输入命令 npm install babel-cli -g 2.输入 cd d:\es6 ; ---进入文件夹路径 3.输入 npm init: 一路回车键 ---(引导你创建一个package.json文件,包括名称.版本.作者这些信息等) 4.输入 npm install --save-dev babel-cli: ---(安装命

Babel 转码器 § es6转换es5

Babel 转码器 § es6转换es5 实时转码 / Repl -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc 1.Babel 的配置文件是.babelrc,存放在项目的根目录下.使用 Babel 的第一步,就是配置这个文件. 该文件用来设置转码规则和插件,基本格式如下. { "presets": [], "plugins": [] } 2.presets字段设定转码规则,官方

ES6与ES5的继承

ES6 ES6中的类类与ES5中的构造函数写法类似区别在于属性要放入constructor中,静态方法和属性实列不会继承 <script> class Person{ height="178cm"; constructor(name,age){ //属性 this.name = name; this.age = age; } //方法 getName(){ console.log("姓名是:"+this.name); } //静态方法 static

webstorm下的sass自动编译和移动端自适应实践

http://www.fawwheel.com/shahramLu/p/6477731.html webstorm下的sass自动编译和移动端自适应实践 1.安装Ruby 2.安装sass 3.webstorm配置file watcher 4.移动端自适应 1.安装Ruby 安装Ruby,有多种方式,打开官网下载因为,使用的是window选择RubyInstall,下载地址 RubyInstall下载地址选择对应系统的版本,下载完成,安装添加到path,建议勾上,安装完成后,打开开始面板,

webstorm下搭建编译less环境

webstorm自带less,不过要编译的话需要nodejs环境. 首先去node的主页下载对应版本的nodejs然后安装,下载地址:http://nodejs.org/ 安装完之后打开命令提示符(win+r),分别输入node -v以及npm -v如果返回版本号说明你安装成功了. 接下来就可以安装less了,命令提示符npm进入npm管理器,然后npm install less开始下载less,默认安装目录在用户名\node_modules这里面. 到这里less安装完毕了,接下来配置webs

mac下用ruby安装sass && webstorm下给scss文件添加watch

1.安装rvm 先安装 [Xcode](http://developer.apple.com/xcode/) 开发工具,它将帮你安装好 Unix 环境需要的开发包 sudo curl -L https://get.rvm.io | bash -s stable sudo source ~/.rvm/scripts/rvm rvm -v 2.用rvm安装ruby sudo rvm install ruby-2.0.0-p648 gem -v gem source -r https://rubyge

ES6转ES5：Gulp+Babel

目标: ES6代码转成ES5 对转换后的ES5进行压缩以上步骤自动监控执行步骤: 1.安装插件在命令行中定位到项目根目录安装全局 Gulp npm install -g gulp 安装项目中使用的 Gulp npm install --save-dev gulp 安装 Gulp 上 Babel 的插件 npm install --save-dev gulp-babel 安装 Babel 上将 ES6 转换成 ES5 的插件 npm install --save-dev babel-pre

gitf远程代码库回滚(webstorm下)

git远程代码库回滚(webstorm下) 1. 场景添加了一个文件[file-for-test.js]到git的控制下进行了三次修改,并分别进行了三次commit,最后进行了一次push git log结果如下图: [file-for-test.js]文件的内容如下图: 现在希望,将远程代码库下的[file-for-test.js]文件回滚到[//lyn test1]的版本 2. 操作步骤 2.1. [Version Control]——[Log] 2.2. 右击[//lyn test1]

ECMAScript6转码器，ES6转ES5

现在越来越多的前端开始关注ES6,也有一部分人开始用ECMAScript 6,但是ES6的一些新的特性并不被低版本的浏览器支持. 所以这次就分享一个ES6转ES5的方法. 一.首先建立一个文件夹,然后里面创建.babelrc文件有时候这个文件创建不了的,可以从别处复制过来 .babelrc文件的内容填写如下: {"presets": [],"plugins": []}.babelrc的后期修改需要手动填写. 二.npm init来初始化项目(一路回车就可以有yes