Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to set up babel compilation under phpstorm. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Set up babel compilation under phpstorm

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

First of all, let's forget about installing nodejs and phpstorm. Look at the official website.

And then, npm install babel babel-cli babel-preset-es2015 babel-preset-react

(note that you don't have to worry about global installation here, nodejs can also be installed on de f disk.)

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

Fill in the name of the extension tool BABEL, not to mention, the following configuration is like the figure above, click OK after configuration.

After configuration, start to set the shortcut key for babel to run: go back to setting and search for key, and click keymap:

Go to External tools- > BABEL (the name of the babel compilation tool), and double-click the add keyboard shortcut setting (I use Alt+n, as long as the shortcut keys don't conflict)

The last step is to click on the jsx file and run it with Alt+n.

The generated js file is referenced in the html page, and then you can see the effect by opening the browser. Configuring babel-preset-es2015 is the same way, using different keyboard shortcuts.

If you have some knowledge of reactjs, the configuration method of this article should be used properly (^ _ ^) (it is also applicable under webstorm).

This is the end of this article on "how to set up babel compilation under phpstorm". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.