Home > Article > Web Front-end > How to use babel in WebStorm ES6
This time I will show you how to use babel in WebStorm ES6. What are the precautions for using babel in WebStorm ES6? The following is a practical case, let's take a look.
1. Grammar support settings Preferences > Languages & Frameworks > 2. Babel 1. Global installationnpm install -g babel-cli2. Current project, applicable to situations where different babel versions are used
npm install --save-dev babel-cli3. Basic usage of Babel
# 转码结果输出到标准输出 babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 babel example.js --out-file compiled.js # 或者 babel example.js -o compiled.js # 整个目录转码 # --out-dir 或 -d 参数指定输出目录 babel src --out-dir lib # 或者 babel src -d lib # -s 参数生成source map文件 babel src -d lib -s4. Using babel in webstorm 0. Create a new test.js file to use as a test case
input.map(item => item + 1);1. A file needs to be added to the project: package.json
{ "name": "application-name", "version": "0.0.1"}2. In the current project, install babel
npm install --save-dev babel-cli3. Use the File Watcher function that comes with WebStorm Preferences > Tools > File Watchers, click the number on the right, select babel, and click OK. After the operation is completed, if you modify the JS code at this time, you will find that a test-compiled.js file is generated synchronously. After opening it, you will find that the code is consistent with the test.js code. You also need to configure transcoding rules, continue reading below. ↓↓↓ 4. Add
config file .babelrc<span style="color:#000000;font-family:NSimsun;"></span>
.babelrc<span style="font-family:NSimsun;"></span>, which is stored in the root directory of the project. The first step in using Babel is to configure this file.
{ "presets": [], "plugins": []}5. Set transcoding rules The
presets<span style="font-family:NSimsun;"></span> field sets the transcoding rules. The following official rule sets are provided. You can install them as needed.
# ES2015转码规则 npm install --save-dev babel-preset-es2015 # react转码规则 npm install --save-dev babel-preset-react # ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个 npm install --save-dev babel-preset-stage-0 npm install --save-dev babel-preset-stage-1 npm install --save-dev babel-preset-stage-2 npm install --save-dev babel-preset-stage-3We need to install es2015, the command is as follows: npm install --save-dev babel-preset-es2015 6.
UpdateConfiguration file .babelrc
Save the corresponding rules to the configuration file.{ "presets": [ "es2015" ], "plugins": [] }7. Complete, check the effect After the above steps are completed, you can automatically convert the ES6 code to ES5 after modifying the code. 5. Use the command to manually compile the code 1. Change the package.json file
{ "name": "application-name", "version": "0.0.1", "devDependencies": { "babel-cli": "^6.26.0" }, "scripts": { "build": "babel src -d lib" } }2. Use the command to generate ES5 code
npm run build3. Effect The code in the src directory will be compiled into the lib directory. I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:
JS converts the list into a tree structure
JS enables pictures to be dragged on the web page
The above is the detailed content of How to use babel in WebStorm ES6. For more information, please follow other related articles on the PHP Chinese website!