directory
1. Environmental installation and configuration
3. Install the File Watches plug -in
Reprinted: https://blog.coderstory.cn/intellij-idea-babel/
Babel is a widely used transferor that can convert the ES6 code to the ES5 code to execute in the existing environment. This means that you can use ES6 to write programs now without worrying about whether the existing environment is supported.
Now you can use IDEA’s Files Watches plug -in to implement the files that use the JavaScript file in the project to automatically convert to ES5 syntax files in the project, and the generated ES5 files and ES6 files are stored in the same directory.
Operation steps
1. Environmental installation and configuration
Because Babel is a plug -in based on Nodejs, we must first install the NodeJS environment. Nodejs can go to nodejs.cn to download. You can click Next to complete the installation without setting. download link:http://nodejs.cn/download/
2. Install the Babel plugin
In IDEA, open the Terminal window, then enter the command and return to the car
npm install --save-dev babel-cli babel-preset-envNote: If you are prompted to find NPM, you need to restart the IDEA.
3. Install the File Watches plugin
File Watches plug -in is a framework that is used to monitor the modification of specific files, and then perform certain special instructions according to the user’s configuration. Now I want File Watches to monitor ES6 files. Once the file is changed, the Babel is called to ES5 file.
Click File-> Settings-> Plugins-> Browse Repositories on the menu bar. Enter File Watches search and select installation on the opening warehouse search page. If the plug -in is prompted, you need to restart the effect and choose to restart.
4. Configure Babel
After opening the IDEA again, click File-> Settings-> Tools-> File Watches in the menu bar. If there is already a configuration entry on the right menu, the existing settings are deleted.
and then click the green “+” in the upper right corner, and select the Babel to open the New Watcher window in the drop -down menu. There are many settings in the window. The specific description is as follows
Name:
The name of the monitoring rules, write casually, for exampleBabel:convert es6 to es5
File type:
Monitoring file type, specific types can be viewed and modified in settings-> Editor-> File Types. Choose hereECMAScript6, including everythingExtension is the file of ES6 (*.s6)
Scope:
Source, which files need to be monitored. Select Project Files here to indicate the surveillance of the entire project
Program：
Program, where you enter the path of the program you need to call, that is, the execution file of the Babel. Because the Babel has been installed to the project directory before, then the path here is [the root directory of the project]+[\ node_modules \ .bin \ babel.cmd]. For example, my project is placed in D: \ Projects \ DEMO-APP, then fill in here
D:\projects\demo-app\node_modules\.bin\babel.cmdArguments：
Run parameter fill in
--source-maps --out-file $FileDir$\$FileNameWithoutExtension$.js --presets env $FilePath$ Output paths to refresh:
Fill in the file storage path after conversion
$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.mapTest
Create a new file with an extension ES6 in the project, and write a little grammatical test code in it in it
Then save this file, open the file again and modify the content, and then turn off this file.
Check whether there is an additional arrow in front of the file in the document directory. There is a JS file and map file in the subordinate directory after clicking (may need to refresh the following directory)
source file
Converted file
Cancellation of strict mode
By default, the converted code uses a strict mode. If you don’t want to use it, you can perform the following operations
1. Install a plug -in that cancels the strict mode
npm install babel-plugin-transform-remove-strict-mode --save-dev
2. Add a parameter call plug -in in the Babel execution parameter
--plugins babel-plugin-transform-remove-strict-mode