How to set up babel compilation under phpstorm

Use extension tools to directly compile babel under phpstorm, mainly for jsx Compile without introducing browser.min.js. It is useful for learning reactjs. It took a lot of detours for beginners to understand it. I hope it will be helpful to beginners. The following are the configuration steps:

First, install I won’t talk about nodejs and phpstorm. Check the official website;

Then, npm install babel babel-cli babel-preset-es2015 babel-preset-react
(note that you don’t need to care whether it is a global installation or not, nodejs You can also choose to install it on the d e f disk...)

Open phpstorm, click file->setting->tools->External tools in the upper left, and then click the plus sign above to add a new extension tool:

Fill in the extension tool name BABEL. Without further ado, the following configuration is as shown above. Click OK after configuration.

After the configuration is completed, start setting the shortcut keys for babel running: go back to the setting to search for key, click keymap:

Enter External tools->BABEL (the name of the babel compilation tool), double-click add keyboard shortcut settings (I use Alt n, as long as the shortcut keys do not conflict)
The last step is to open the jsx file and run Alt n:

The generated js file is in Quote it in the html page, and then open the browser to see the effect. Configuring babel-preset-es2015 is the same method, using different shortcut keys.

Only if you have a certain understanding of reactjs can the configuration method in this article be used properly (^__^) (it is also applicable under webstorm).