解决Webstrom babel 自动编译问题

这几天，我花了一段时间学习如何使 babel 在 mac 版的Webstorm 中正常运行，如何自动编译 ES6 代码，我认为这可能会对其他人有所帮助，蛮需要记录一下的，因为网上的坑实在太多了～

1 官方文档

babel官网

2 前期工作

• Webstrom IDE
• node环境安装（基本也很简单）
• 会使用终端，会使用npm（微笑脸）

3 我的步骤

3.1 新建一个项目

我的是命名为panda项目,然后新建一个panda.js，然后随便写一段 ES6 代码，如图：

注：如果此处代码报红的同学，记得：

• 选择左上角File 或 Webstrom(mac）
• Setting 或 preferences(mac)
• Language & Frameworks
• JavaScript
• 选择ECMA6
• Apply
• OK，不报红～

3.2 新建package.json

• 打开项目的终端
• 输入npm init
• 然后一直回车

可以看到package.json的内容，如图所示：

3.3 安装

在项目终端，输入如下代码：

npm install --save-dev babel-cli

安装完之后package.json也多了内容：

3.4 添加File Watchers

如图所示

3.5 .babelrc 的文件

在工程根目录下，新建名为.babelrc的文件

打开文件，把下面的配置贴进去，保存

{
  "presets": ["env"]
}

截图所示

3.6 安装

在终端中输入：

npm install babel-preset-env --save-dev

如图，在package.json又可以看到所对应内容：

接着，在终端中继续输入：

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

如图，又增加了内容：

3.7 测试

现在我们开始测试一下，把panda.js文件随便改点东西，然后ctrl +s保存，看看目录是不是多了个dist文件夹，看看里面是否有编译好的文件。

结果发现并没有生成dist文件，(如果有生成dist文件的同学就不用看下一步),没有生成dist文件的这一步真的非常浪费了我巨多时间去排查…

后来发现，在Setting或preferences(mac)中,选择我们刚才加入的babel，双击之后，把Arguments中的--presets后面加上-es2015,接着删除后面的@babel/env，然后保存，应用，再重新修改一下我们的panda.js，保存之后，就可以看到dist文件，还可以看到里面的编译文件。

4. 更多问题

如果其他问题，欢迎一起探讨
blog：https://panda-pig.cn