一、检查File-Watchers中Babel的Arguments,有一项presets的设置,把他更改为=es2015,详细设置如下:

$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets=es2015

二、把JavaScript language version改成ECMAScript 6;

安装base后,增加base的watch

IDE会出现一个File watcher提示条

先别点Add watcher!我们要先去装babel~

首先在根目录新建一个package.json

  1. {
  2. "name": "test-project",
  3. "version": "1.0.0"
  4. }

  打开IDE的Terminal,安装babel-cli

  1. npm install --save-dev babel-cli
下面第三行,Program那一项,填

  1. $ProjectFileDir$/node_modules/.bin/babel

然后点OK,这个时候你就会发现左边多出来一个main-compiled.js文件啦

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

所以我们需要安装Babel的preset以正确识别ES6代码;

和刚才一样,在npm安装babel的ES6的preset

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

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

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

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

注意:想直接用Node.js运行ES6代码还是有些问题..因为这段代码用的ES6的解构赋值Node.js还未完全支持,需要在运行的时候加入一些tags(以开启Node.js的相关试验特性),具体可以参考Node.js官网对ES6的说明:ECMAScript 2015 (ES6)

原文地址:https://www.zhihu.com/question/43414079

利用babel自动编译es6文件的更多相关文章

  1. linux(以ubuntu为例)下Android利用ant自动编译、修改配置文件、批量多渠道,打包生成apk文件

    原创,转载请注明:http://www.cnblogs.com/ycxyyzw/p/4555328.html  之前写过一篇<windows下Android利用ant自动编译.修改配置文件.批量 ...

  2. Eclipse不自动编译java文件的终极解决方案

    最近我的eclipse经常犯傻,项目中总是有很多,启动项目也是没有启动类.查了下项目中生成的class文件,我靠竟然没有,或者还是以前的.原来是eclipse犯傻了,它没帮我自动编译java文件.一般 ...

  3. Eclipse不能自动编译 java文件的解决方案

    前段时间出现了eclipse 不自动编译java文件的问题,在网上找了好长时间,总算把问题解决了,现在把这个问题的解决方法总结一下. 1,看看project -- Build Automaticall ...

  4. windows下Android利用ant自动编译、修改配置文件、批量多渠道,打包生成apk文件

    原创文章,转载请注明:http://www.cnblogs.com/ycxyyzw/p/4535459.html android 程序打包成apk,如果在是命令行方式,一般都要经过如下步骤: 1.用a ...

  5. Hbuilder中添加Babel自动编译

    Hbuilder是一个不错的H5开发IDE. Babel是EMCAScript最新标准的编译器,很多ES的最新特性都可以在Babel中尝试. 如果可以有办法在Hbuilder中直接使用ES6,并通过B ...

  6. Eclipse不能自动编译 java文件

      在网上的解决方法 方法参考如下: (1) Window-->Preferences-->General-->Workspace  有个"Build automatica ...

  7. Eclipse不能自动编译 java文件,不会生成CLASS

    每次修改类代码后都得重启 Tomcat 花了1天终于解决,网上所说基本是下面1和2的方法,使用之后还是不行最后重新建工作环境导入项目对比了一下找到第三种方法 1.Project 下有个 "B ...

  8. Tomcat不能自动编译JSP文件问题的一种解决方法

    今天碰到一个非常奇怪的问题,机器环境是JDK8.Tomcat8,把jQuery MiniUI ( for Java Eclipse)下载后导入到Eclipse中,首页可以显示,但运行操作数据库的页面出 ...

  9. 利用babel工具将es6语法转换成es5,Object.assign方法报错

    一.新建工程初始化项目 1.新建工程文件夹这里起名叫做es6,然后在里面创建两个文件夹分别为src .dist如下图:(src为待转换es6 js存放目录,dist为编译完成后的es5 js存放目录) ...

随机推荐

  1. llinux 目录结构 及Linux文件分享

    llinux 基础命令 及个人Linux文件分享 一, root用户名 @ 分隔符 kingle 主机名 ~当前所在目录 # root权限 $ 没分配权限用户 二, 书写格式:空格 [命令参数] 空格 ...

  2. 创建本地maven仓库

    1.首先从下面地址下载nexus-oss-webapp-2.3.1-01 http://pan.baidu.com/s/1pKOLdbH 2.修改配置文件: 打开:*nexus-oss-webapp- ...

  3. pat1013. Battle Over Cities (25)

    1013. Battle Over Cities (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue It ...

  4. 游戏AI的生命力源自哪里?为你揭开MOBA AI的秘密!

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由wataloo发表在专栏wataloo的试验田 1 设计概要 1.1 设计原则和目的 英雄AI的目的主要有: 1.新手过渡局,让玩家刚 ...

  5. SpringBoot | 第三十一章:MongoDB的集成和使用

    前言 上一章节,简单讲解了如何集成Spring-data-jpa.本章节,我们来看看如何集成NoSQL的Mongodb.mongodb是最早热门非关系数据库的之一,使用也比较普遍.最适合来存储一些非结 ...

  6. 使用c#正则验证关键字并找出匹配项

    在.net里,使用类Regex可以正则验证一些关键字并取出匹配项. 1.使用Regex.IsMatch(string  input,  string  pattern,  RegexOptions   ...

  7. C# 判断List集合中是否有重复的项

    /*在.Net 3.5 以上*/ ).Count() >= ;

  8. (五)html部分标签元素补充

    html标签元素十分的多,一次性掌握全部,那是不可能的,在后续的学习中,会不断补充标签元素... 1.行元素和块元素 行标签元素即是标签元素根据内容大小进行自适应,而不是占据一整行. 如<spa ...

  9. Android4.4 在Framework新增内部资源编译不过的问题

    如果在Frameworks新增内部资源,并在Java代码中使用类似形式来引用资源:com.android.internal.R.layout.xxx,需要在frameworks/base/core/r ...

  10. 阿里巴巴国际站 网站和PC客户端都登录不了,其他电脑或手机可以

    背景 昨天晚上,我还能打开阿里巴巴国际站,PC客户端也可以登录 今天早上起床打开电脑,发现国际站的网站打开不了,客户端也登录不了,提示了错误信息,但是其他电脑或手机就可以登录 原因分析 1.是不是本机 ...