详解设置Webstorm 利用babel将ES6自动转码成ES5

前言：ECMAScript 6是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。ES6的目标，是使得JavaScript语言可以用来编写大型的复杂的应用程序，成为企业级开发语言。但是现代浏览器对ES6新特性支持度不高，所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。

今天我就来分享一下，如何配置Webstorm 利用babel将ES6自动转码成ES5。Babel是一个广泛使用的转码器，babel可以将ES6代码完美地转换为ES5代码，所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

1.在Webstorm 里新建一个空项目，取名为es6demo.

2..然后在根目录下面新建一个package.json,只需要写明两个属性即name和version。

3.打开webstorm的终端(Terminal)，快捷键为Alt+F12,安装babel-cli。也可全局安装。

或者这样打开：

安装babel-cli： npm install --save-dev babel-cli

4.安装完babel-cli后，可以看到新生成了一个node_modules文件和一个package-lock.json文件，同时发现package.json文件中多出了

"devDependencies": {
"babel-cli": "^6.26.0"

}

这样一行代码，此代码说明babel-cli已安装成功，形成了依赖。

5.然后再Settings->Languages & Frameworks中选择Javascript选项，同时将version版本选择为ECMAScript6即可。

6.再在webstorm的终端(Terminal)，安装Babel的preset以正确识别ES6代码，命令如下：

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

安装完后同时在package.json文件中会多出

"babel-preset-es2015": "^6.24.1" 这样一行代码，说明babel-preset-es2015也成功安装上了。

7.在根目录下面新建一个名为.babelrc文件，内容如下：

{

 "presets": [

  "es2015"

 ]

}

8.设置File Watcher. File--settings--Tools--File Watcher。

9.创建一个名为test.js，在里面写es6的语法，不再报错。test-compiled.js就是编译成es5的文件，默认是严格模式。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解webpack 配合babel 将es6转成es5 超简单实例

    今天接触了webpack,第一次使用webpack进行转码,竟然稀里糊涂就成功了,哈哈. 下面附上流程 创建个文件夹,初始化一下,首先全局安装webpack npm install webpack --save-dev 然后安装babel npm install --save-dev babel-core babel-preset-es2015 npm install --save-dev babel-loader 在当前文件夹内执行安装,然后创建两个文件夹一个src作为源文件夹,一个bin,保

  • 利用babel将es6语法转es5的简单示例

    利用babel将es6语法转es5的简单示例

    前言 Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持. 本文讲解需预装node和npm.大家可以参考这篇文章:http://www.jb51.net/article/90518.htm,这里介绍的非常详细. 文件目录结构 生成包管理配置文件package.json npm init -y 安装转换工具 npm i -g babel-cli npm i --save-dev babel-pr

  • 详解设置Webstorm 利用babel将ES6自动转码成ES5

    详解设置Webstorm 利用babel将ES6自动转码成ES5

    前言:ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言.但是现代浏览器对ES6新特性支持度不高,所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现. 今天我就来分享一下,如何配置Webstorm 利用babel将ES6自动转码成ES5.Babel是一个广泛使用的转码器,

  • 详解用Webpack与Babel配置ES6开发环境

    安装 Webpack 安装: # 本地安装 $ npm install --save-dev webpack webpack-cli # 全局安装 $ npm install -g webpack webpack-cli 在项目根目录下新建一个配置文件-- webpack.config.js 文件: const path = require('path'); module.exports = { mode: 'none', entry: './src/index.js', output: { f

  • 详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

    详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

    本文介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持,分享给大家,具体如下: 一个小遗憾 能来看这篇文章的想必不用我来介绍vue是什么了.先让我们膜拜大神!vue项目的创建者尤大写了个sublime下语法高亮的插件,有人问他how about webstorm support?他是这么回答的.默哀一分钟. 添加高亮和语法支持 这个我是通过插件来实现的.网上目前有两个插件: 插件1:https://github.com/henjue/vue-for-idea 插件2:htt

  • 详解linux下利用crontab创建定时任务

    Linux下可以利用crontab创建定时任务. 常用搭配 crontab -e 编辑任务 crontab -l 查看所有任务[该用户] crontab -r 取消所有任务[该用户] 任务格式 × × × × × +命令(具体任务) 前5个参数表示时间,依次为: 参数 范围 分钟 0-59 小时 0-23 日期 1-31 月份 1-12 星期 0-6(0代表星期日) 特殊符号 为了精确表示定时,需要一些特殊符号来描述具体的任务执行时间.有以下几个符号: "/" 代表每,每隔多长时间 &

  • 详解Xamarin.Android 利用Fragment实现底部菜单

    本篇文章主要介绍了详解Xamarin.Android 利用Fragment实现底部菜单,分享给大家,具体如下: 效果图: 第一步:添加引用 引用 Crosslight.Xamarin.Android.Support.v7.AppCompat 这个包. 第二步:绘制Main和Fragment界面 fg_home.axml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:androi

  • 详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据

    详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据

    pandas的DataFrame对象,本质上是二维矩阵,跟常规二维矩阵的差别在于前者额外指定了每一行和每一列的名称.这样内部数据抽取既可以用"行列名称(对应.loc[]方法)",也可以用"矩阵下标(对应.iloc[]方法)"两种方式进行. 下面具体说明: (以下程序均在Jupyter notebook中进行,部分语句的print()函数省略) 首先生成一个DataFrame对象: import pandas as pd score = [[34,67,87],[68

  • 详解Java如何利用位操作符创建位掩码

    目录 位掩码 举个例子 编码 解码 提取一个比特 第一比特 任意位置的位 提取多个比特 应用一个比特掩码 总结 在本文中,我们来看看如何使用位操作符实现低级别的位掩码.我们将看到我们如何将一个单一的int变量作为一个单独的数据容器. 位掩码 位掩码允许我们在一个数字变量中存储多个值.我们不再把这个变量看作一个整数,而是把它的每一个比特当作一个独立的值. 因为一个比特可以等于 0 或 1,我们也可以把它看成是 false 或 true .我们也可以把一组比特切开,把它们当作一个较小的数字变量甚至是

  • 详解Java如何利用数字描述更多的信息

    目录 一 . 前言 二 . 单数中描述信息 三. 宏观思路 总结 一 . 前言 这一篇来趣味性的探讨一下 , 如何通过更少的空间描述更多的信息 在数据库里面 ,通常我们会用数字的递进来描述状态等信息 , 但是如果想进行更复杂的操作 , 就有必要对二进制有一定理解了. 二 . 单数中描述信息 单数中保存多个信息的意思是 : 我们能把多少信息存储到一串数字里面. 这里直接来通过一些案例来说明用法 用单个数字来表示状态 这也是业务中最常见的一种使用方式 , 通过数字 1,2,3 等来描述一个状态 ,

  • 详解Python如何利用turtle绘制中国结

    详解Python如何利用turtle绘制中国结

    目录 导语 一.中国结 01  平安喜乐 1)效果图 2)附代码 二.中国结 02 心想事成 1)效果图 2)附代码 三.中国结 03 烟火年年 总结 导语 春节是中国特有的传统节日,中国结是中华民族特有的纯粹的文化精髓,富含丰富的文化底蕴,代表着我们对未来,对美好生活的向往和憧憬.新春佳节,小编祝福大家虎年吉祥!万事如意!祝我们的祖国引领世界,勇立潮头!国富民强! 渐渐的,渐渐的,新年很快就要到来.在快过新年时,人们有一个习俗,那就是买“中国结”. 据说,中国结可以让一家人平平安安.幸福,所以

  • 详解Python如何利用Pandas与NumPy进行数据清洗

    详解Python如何利用Pandas与NumPy进行数据清洗

    目录 准备工作 DataFrame 列的删除 DataFrame 索引更改 DataFrame 数据字段整理 str 方法与 NumPy 结合清理列 apply 函数清理整个数据集 DataFrame 跳过行 DataFrame 重命名列 许多数据科学家认为获取和清理数据的初始步骤占工作的 80%,花费大量时间来清理数据集并将它们归结为可以使用的形式. 因此如果你是刚刚踏入这个领域或计划踏入这个领域,重要的是能够处理杂乱的数据,无论数据是否包含缺失值.不一致的格式.格式错误的记录还是无意义的异常

随机推荐