解决 webstrom 上的 babel 编译问题


前言

近日,在写 ejs 文件时,我发现用 vscode 没有啥提示,因此换成 webStrom ,但是用 webStrom 将 es6 编译成 es5 的时候出现了一些问题😭,经过一番搜索, 最后终于成功解决,这里记录一下🖊

方法

  • 首先建立一个新的工程,点击设置

  • 在设置里面,把JavaScript language version改成ECMAScript 6

  • 然后在js文件里写一段ES6代码

  • 现在IDE会出现一个File watcher提示条

  • 此时先别点Add watcher!

  • 在终端切换到项目的路径,输入以下命令

1
npm init -y //package.json
  • 安装babel-cli
1
npm install --save-dev babel-cli
  • 现在可以去点Add watcher,点完之后会弹出一个框

  • 下面第三行,Program 那一项,填

1
$ProjectFileDir$/node_modules/.bin/babel
  • 然后点OK,这个时候你就会发现左边多出来一个新文件

  • 但是现在还没搞定!现在只是搞定了自动转换的功能,系统默认把ES6 编译成了ES6…

  • 打开终端,输入:

1
npm install --save-dev babel-preset-es2015
  • 再次打开设置,在搜索框输入file watchers,点击babel

  • 在 Arguments 里面将 env 改为 =es2015,点击ok

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

1
2
3
4
5
{
"presets": [
"es2015"
]
}
  • 完成😁
-------------本文结束感谢您的阅读-------------

本文标题:解决 webstrom 上的 babel 编译问题

文章作者:shenzekun

发布时间:2017年12月05日 - 07:13

最后更新:2018年10月21日 - 20:51

原始链接:http://www.shenzekun.cn/解决-webstrom-上的-babel-编译问题.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

您的支持将鼓励我继续创作!