使用 Babel (PhpStorm) 的 ES6 Transpile 错误

Question

我的 Babel 文件监视器上的 PhpStorm 中出现以下编译错误：

    cmd.exe /D /C call "C:/Program Files/nodejs/babel.cmd" wp-content\plugins\scorch_gutenberg\blocks.js --out-dir dist --presets=es2015
SyntaxError: wp-content/plugins/scorch_gutenberg/blocks.js: Unexpected token (12:15)
  10 | 
  11 |     edit() {
> 12 |         return <p style={ blockStyle }>Hello editor.</p>;
     |                ^
  13 |     },
  14 | 
  15 |     save() {

Process finished with exit code 1

从本质上看，它似乎无法识别 ES6 语法。我已经按照 Babel 网站安装了 es2015 预设，我看到的唯一错误是这个 Synax，所以不确定我是否遗漏了一些明显的东西，因为我真的是一个 PHP 开发者。

任何帮助都将是非常棒的，或者如果其他人拥有最新版本的 PhpStorm 并为此目的设置了一个转译器。

Answer 1

它无法识别 JSX 语法（return <p style={ blockStyle }>Hello editor.</p> 是 JSX）。您需要安装 babel-preset-react 并将其添加到预设

使用 Babel (PhpStorm) 的 ES6 Transpile 错误

ES6 Transpile error using Babel (PhpStorm)

phpstorm

webstorm

ecmascript-6

babeljs

gutenberg-blocks