雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码

Web/PHPStorm ES6 语法支持以及实时编译

2017-04-26 分类:前端之旅 阅读(4311) 评论(0)

最近用PHPstorm 写了点es6的语法的东西, what ? 编辑器报错了

查了查, 原来把编辑器设置一下,就可以了,

Preferences > Languages & Frameworks > JavaScript

65edit

然后,运行代码, what? 又报错了…

看来我们需要自动转码为Es5,不然还不行.

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

而且你还希望每次修改代码时能自动转码,所以还要用到编辑器的file watcher(当然还有其他解决方案)

 

在根目录新建一个package.json

1
2
3
4
{
  "name": "hello",
  "version": "1.0.0",
}

然后 npm install -g babel

安装babel

Preferences > Tools > File watchers

=170426105147

File Type:配置该监听器监听的文件类型,可以在Preferences > Editor > File types中配置
Scope:配置该监听器的监听范围,可自定义新的范围,也可以使用Preferences > Appearance & Behavior > Scopes
Program:babel的安装位置
Arguments:命令执行参数,参见Babel CLI
Working directory:babel命令执行的位置,默认为文件所在目录

但是还没搞定!现在只是搞定了自动转换的功能,系统默认把ES6 compile成了ES6..(你应该会发现compile出来的东西跟原来的一样..Generator函数并没有被转换成ES5的格式)

所以我们需要安装Babel的preset以正确识别ES6代码;和刚才一样,在npm安装babel的ES6的preset
npm install --save-dev babel-preset-es2015

在根目录下新建一个.babelrc文件(就是babel在当前项目的配置文件),写上

1
2
3
4
5
{
  "presets": [
    "es2015"
  ]
}

OK搞定!保存再回去看一下main-compiled.js 应该就变成这个样子啦,现在你在main.js里直接写ES6代码,IDE都会自动compile成ES5的代码在这里啦~

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

1
2
3
function he(a=1,b=2) {
    console.log(123);
}

编译后

1
2
3
4
5
6
7
8
9
"use strict";
 
function he() {
    var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
    var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
 
    console.log(123);
}
//# sourceMappingURL=c.js.map

大功告成!

分享到:更多 ()
标签:前端界面

相关推荐

  • 获取上传文件实时进度条的尝试
  • 关于微信小程序Websocket的一些小坑
  • 记录几个常用的HTML空格占位符
  • 简单理解vue的slot内容分发
  • vue 官方推荐Nuxt.js 服务端渲染尝试!
  • 使用 Electron 打包桌面应用
  • vue-cli 实现后台实时编译修改
  • 移动云全景 – 怎么生成720全景
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2025年7月
一 二 三 四 五 六 日
« 六    
 123456
78910111213
14151617181920
21222324252627
28293031  

最新评论

  • 前端小武 8年前 (2017-04-06)说:
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说:
  • Dawn 9年前 (2016-09-16)说:
    call_user_func_array最后的例子是错哦,你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说:
    tp框架设置了全局捕获异常的,这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说:
    构造函数里的判断 用异常机制可能更好一些

其他类型

  • 芊云全景
  • 配音兔AI配音神器

博客类型

  • 芊云全景
  • 配音兔AI配音神器

左邻右舍

  • 易水寒
  • 楼教主
  • 芊云全景
  • 贤心
  • 配音兔AI配音神器

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2025 雅荷心语博客   网站地图