search
HomeWeb Front-endJS TutorialWebStorm ES6 syntax settings and introduction to babel usage

The following editor will bring you an article on WebStorm ES6 syntax support settings & babel usage and automatic compilation (detailed explanation). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look.

1. Grammar support settings

##Preferences > Languages ​​& Frameworks > JavaScript

2. Babel installation

1. Global installation


 npm install -g babel-cli
2. Current project, applicable to situations where different babel versions are used


 npm install --save-dev babel-cli

3. 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 -s

4. Using babel in webstorm

0. Create a new test.js file , used 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-cli
3. Use the File Watcher function that comes with WebStorm

Preferences > Tools > File Watchers, click right Click the + sign on the side, 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, 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 the configuration file

.babelrc<span style="color:#000000;font-family:NSimsun"></span>Babel’s configuration file is

.babelrc<span style="font-family:NSimsun">, stored in the root directory of the project. The first step in using Babel is to configure this file. </span>This file is used to set transcoding rules and plug-ins. The basic format is as follows.

{ "presets": [], "plugins": []}

5. Set the transcoding rules

presets<span style="font-family:NSimsun"> field to set the transcoding rules , the official provides the following rule sets, you can install them according to your needs. </span>

# 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-3

We need to install es2015, the command is as follows:

npm install --save-dev babel-preset-es2015

6. Update the configuration 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 code1. 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 build

3. The effect

will be The code in the directory is compiled into the lib directory.

The above is the detailed content of WebStorm ES6 syntax settings and introduction to babel usage. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
webstorm怎么运行vue项目webstorm怎么运行vue项目Apr 08, 2024 pm 01:57 PM

要使用 WebStorm 运行 Vue 项目,可以按照以下步骤进行操作:安装 Vue CLI创建 Vue 项目打开 WebStorm启动开发服务器运行项目查看浏览器中的项目在 WebStorm 中调试项目

webstorm怎么创建htmlwebstorm怎么创建htmlApr 08, 2024 pm 01:42 PM

使用 WebStorm 创建 HTML 项目分五步:创建新项目并配置 HTML 设置;添加新 HTML 文件;编写 HTML 代码并利用实时预览;预览 HTML 文件并进行部署;使用模板和 Emmet 快捷方式加快开发。

WebStorm2021如何安装?安装教程详解【附图】WebStorm2021如何安装?安装教程详解【附图】Aug 02, 2022 pm 05:27 PM

对于入门JavaScript 开发的者,最重要的就是安装WebStorm软件,一款非常优秀的JavaScript工具,在互联网上查询目前还没有一篇写得比较详细的WebStorm教程。今天分享WebStorm2021.3.2版本的安装教程,从下载到安装以及创建项目带大家完整的走一遍。

webstorm怎么切换中文webstorm怎么切换中文Apr 08, 2024 pm 01:30 PM

WebStorm 中切换中文方法:打开设置面板(Windows/Linux:Ctrl + Alt + S;macOS:Command + ,)。导航至“外观和行为”>“语言和框架”。在“用户界面语言”下拉菜单中选择“IntelliJ IDEA 用户界面”。在“Locale”列表中选择所需的中文语言(例如“中文(中国大陆)”)。点击“应用”,重启 WebStorm。

webstorm怎么改中文版webstorm怎么改中文版Apr 08, 2024 pm 12:24 PM

将 WebStorm 更改为中文版:打开 WebStorm 设置。导航到“Appearance & Behavior”>“Language & Fonts”。在“User Interface Language”中选择“Chinese (Simplified)”或“Chinese (Traditional)”。重启 WebStorm,界面将显示为中文。

webstorm怎么恢复默认webstorm怎么恢复默认Apr 08, 2024 pm 12:15 PM

要恢复 WebStorm 为默认设置,请关闭 WebStorm 并删除首选项目录,然后重新启动 WebStorm。详细步骤包括:完全退出 WebStorm。删除首选项目录(具体位置因操作系统而异)。重新启动 WebStorm。

webstorm怎么新建项目webstorm怎么新建项目Apr 08, 2024 am 11:57 AM

使用 WebStorm 创建新项目的步骤:打开 WebStorm并选择“新建项目”;根据需要选择项目类型,如 Node.js、React 等;配置项目设置,包括名称、位置和框架版本;对于特定项目类型,选择所需框架;单击“创建”按钮生成项目;项目将自动在 WebStorm 中打开,供您编写代码和构建应用程序。

webstorm怎么创建vue项目webstorm怎么创建vue项目Apr 08, 2024 pm 12:03 PM

通过以下步骤在 WebStorm 中创建 Vue 项目:安装 WebStorm 和 Vue CLI。在 WebStorm 中创建一个 Vue 项目模板。使用 Vue CLI 命令创建项目。将现有项目导入 WebStorm。使用 "npm run serve" 命令运行 Vue 项目。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool