解决 webstrom 上的 babel 编译问题

本文介绍如何在WebStorm中配置支持ES6语法,并实现自动编译为ES5。通过安装必要的工具和调整设置,使得开发过程更加高效。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

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

方法

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

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

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

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

  • 此时先别点Add watcher!

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

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

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

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

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

  • 打开终端,输入:

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

  • 在 Arguments 里面讲 dev 改为 =es2015,点击ok

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

{
  "presets": [
    "es2015"
  ]
}
  • 完成��
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值