Use spark, ANSJ segmentation to perform frequent statistics

2023-01-01   ES  


1. Environmental installation and configuration

2. Install the Babel plugin

3. Install the File Watches plug -in

4. Configure 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 to download. You can click Next to complete the installation without setting. download link:

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-env

Note: 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

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)
Source, which files need to be monitored. Select Project Files here to indicate the surveillance of the entire project
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


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



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


Related Posts

pHP download file function package and download large file solution

HIVESQL user retention rate

Commonjs/ES6/AMD module

record: My first generation of deep image object recognition

Use spark, ANSJ segmentation to perform frequent statistics

Random Posts

Shiro+CAS front and back -end separation single -point login solution

Record once Elastic-JOB Faber Query and Basic Concept understanding

Android development environment address download Adt-Bundle Android-Studio SDK Adt

Android system source code system application installation process (below) Xiaodian brother

linux multi -threaded foundation 2