WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

一、语法支持设置

Preferences > Languages & Frameworks > JavaScript

二、Babel安装

1、全局安装

 npm install -g babel-cli

2、当前项目，适用于使用不同babel版本的情况

 npm install --save-dev babel-cli

三、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

四、webstorm中使用babel

0、新建一个test.js文件，用作测试用例

input.map(item => item + 1);

1、项目中需要增加一个文件： package.json

{ "name": "application-name", "version": "0.0.1"}

2、当前项目中，安装babel

npm install --save-dev babel-cli

3、使用WebStorm自带的File Watcher功能

Preferences > Tools > File Watchers ，点击右侧的+号，选择babel，直接点击OK即可。

操作完成后，这时候修改JS代码，就会发现同步生成了一个test-compiled.js 文件，打开后发现代码和test.js代码一致。

还需要配置转码规则，继续往下看。↓↓↓

4、添加配置文件 .babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。

该文件用来设置转码规则和插件，基本格式如下。

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

5、设置转码规则

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

# 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

咱们需要安装es2015，命令如下：

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

6、更新配置文件 .babelrc

将相应的规则，保存至配置文件中。

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

7、完成，查看效果

以上步骤操作完成后，即可实现修改代码后，自动将ES6代码转换为ES5。

五、使用命令，手动编译代码

1、更改package.json文件

{
 "name": "application-name",
 "version": "0.0.1",
 "devDependencies": {
 "babel-cli": "^6.26.0"
 },
 "scripts": {
 "build": "babel src -d lib"
 }
}

2、使用命令，生成ES5代码

npm run build

3、效果

会将src目录下的代码，编译到lib目录下。

以上这篇WebStorm ES6 语法支持设置&babel使用及自动编译(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 让nodeJS支持ES6的词法----babel的安装和使用方法

    让nodeJS支持ES6的词法----babel的安装和使用方法

    要使用Babel, 我们需要nodeJS的环境和npm, 主要安装了nodeJS, npm就默认安装了 , 现在安装nodeJS很简单了, 直接下载安装就好了: 安装es-checker 在使用Babel之前 , 我们要先检测一下当前node对es6的支持情况, 我们使用先es-checker, 命令行下执行: 运行下面代码 npm -g install es-checker es-checker安装完毕以后, 命令行执行:es-checker , 如下图, 我的node环境版本是v4.4.3,

  • JavaScript中ES6 Babel正确安装过程

    JavaScript中ES6 Babel正确安装过程

    本文介绍Babel6.x的安装过程~首先呢,可以使用Babel在线转换 https://babeljs.io/repl/ 然后进入主题:安装Babel(命令行环境,针对Babel6.x版本) 1.首先安装babel-cli(用于在终端使用babel) npm install -g babel-cli 2.然后安装babel-preset-es2015插件 npm install --save babel-preset-es2015 注:Babel5版本默认包含各种转换插件,然而Babel6.x相

  • WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

    WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

    一.语法支持设置 Preferences > Languages & Frameworks > JavaScript 二.Babel安装 1.全局安装 npm install -g babel-cli 2.当前项目,适用于使用不同babel版本的情况 npm install --save-dev babel-cli 三.Babel基本用法 # 转码结果输出到标准输出 babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 bab

  • Python语法学习之线程的创建与常用方法详解

    Python语法学习之线程的创建与常用方法详解

    目录 线程的创建与使用 线程的创建 -threading 线程对象的常用方法 线程演示案例 线程的问题 线程的创建与使用 在Python中有很多的多线程模块,其中 threading 模块就是比较常用的.下面就来看一下如何利用 threading 创建线程以及它的常用方法. 线程的创建 -threading 函数名 介绍 举例 Thread 创建线程 Thread(target, args) Thread 的动能介绍:通过调用 threading 模块的 Thread 类来实例化一个线程对象:它

  • babel插件去除console示例详解

    babel插件去除console示例详解

    目录 起因 介绍 窥探 初见AST Program ExpressionStatement CallExpression MemberExpression Identifier StringLiteral 公共属性 如何写一个babel插件? 构造visitor方法 去除所有console 增加env api 增加exclude api 增加commentWords api 细节完善 对于后缀注释 对于前缀注释 发布到线上 安装 使用 起因 已经颓废了很久 因为实在不知道写啥了 突然我某个同事对

  • javascript ES6中set集合、map集合使用方法详解与源码实例

    set与map理解 ES6中新增,set集合和map集合就是一种数据的存储结构(在ES6之前数据存储结构只有array,object),不同的场景使用不同的集合去存储数据 set集合 Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用. set集合语法: //创建一个set集合,传参为一个可迭代的对象 const s1 = new Set(iterable); API 名称 类型 简介 Set.add() 原型方法 添加数据 Set.has() 原型方法 判断是否存在一个数据 S

  • IOS开发 支持https请求以及ssl证书配置详解

    IOS开发 支持https请求以及ssl证书配置详解 前言: 众所周知,苹果有言,从2017年开始,将屏蔽http的资源,强推https 楼主正好近日将http转为https,给还没动手的朋友分享一二 一.证书准备 1.证书转换 在服务器人员,给你发送的crt证书后,进到证书路径,执行下面语句 // openssl x509 -in 你的证书.crt -out 你的证书.cer -outform der 这样你就可以得到cer类型的证书了.双击,导入电脑. 2.证书放入工程 1.可以直接把转换好

  • Java 用反射设置对象的属性值实例详解

    Java 用反射设置对象的属性值实例详解 /** * 用反射设置对象的属性值 * @param obj 需要設置值的對象 * @param fieldName 需要設置值的屬性 * @param value 需要设置的值 * @return 设置值后的对象 */ private Object invoke(Object obj, String fieldName, Object value) { String firstWord = fieldName.substring(0, 1).toUpp

  • goland 设置注释模板的过程图文详解

    goland 设置注释模板的过程图文详解

    网上找了一些办法 都没有说到关键点: 梳理一下设置步骤如下,以及避免的坑. 新建文件自动加注释: Preferences | Editor | File and Code Templates 打开go File 在右侧输入模板,然后点击Apply: 对已有的方法或者文件添加注释: 1.Preferences | Editor | Live Templates 打开Live Templates,如下图打开go,点击右侧的➕ ,选择live_Template, 2.然后修改Abbreviation,

  • Django中Cookie设置及跨域问题处理详解

    Django中Cookie设置及跨域问题处理详解

    目录 什么是Cookie(翻译:曲奇饼干) Cookie怎么来的 为什么要用Cookie Cookie的特点 怎么设置Cookie Cookie常用参数 怎么获取Cookie Cookie跨域问题处理 什么是Cookie(翻译:曲奇饼干) Cookie是存储在浏览器中的一段纯文本信息(简单的说就是浏览器缓存),用来记录用户的使用情况并将其存储在本地设备中,当用户访问服务器时会将Cookie附带上,服务端通过读取Cookie的记录,来维持用户与服务器的会话状态. Cookie怎么来的 Cookie

  • Python语法学习之进程的创建与常用方法详解

    Python语法学习之进程的创建与常用方法详解

    目录 进程的创建模块 - multiprocessing 创建进程函数 - Process 进程的常用方法 start 函数 join 函数 kill 函数 与 is_alive 函数 进程的相关问题 该章节我们来学习一下在 Python 中去创建并使用多进程的方法,通过学习该章节,我们将可以通过创建多个进程来帮助我们提高脚本执行的效率.可以认为缩短脚本执行的时间,就是提高执行我们脚本的效率.接下来让我们都看一下今天的章节知识点都有哪些? 进程的创建模块 - multiprocessing 创建

  • C#实现给Word每一页设置不同文字水印的方法详解

    C#实现给Word每一页设置不同文字水印的方法详解

    目录 方法思路 dll引用 代码示例 Word中设置水印时,可使用预设的文字或自定义文字设置为水印效果,但通常添加水印效果时,会对所有页面都设置成统一效果,如果需要对每一页或者某个页面设置不同的水印效果,则可以参考本文中的方法.下面,将以C# 代码为例,对Word每一页设置不同的文字水印效果作详细介绍. 方法思路 在给Word每一页添加文字水印前,首先需要在Word文档每一页正文的最后一个字符后面插入“连续”分节符,然后在每一节的页眉段落里添加艺术字形状,并设置形状大小.对齐方式等.最后保存文档

随机推荐