ES6笔记(1) -- 环境配置支持

系列文章 -- ES6笔记系列

虽然ES6已经发布一年多了,但在各大浏览器之中的支持度还不是很理想,在这查看 ES6新特性支持度 Chrome的最新版本浏览器大部分已经支持,在Node.js环境上支持度更好一些,可原生使用,但实际上更多的做法是用其他工具将ES6转码成支持度更好的ES5 这些工具有babel转码器traceur转码器 等,用得最多的应该是babel

一、Babel环境的配置

Babel用于将ES6语法转换成ES5语法,例如

 1 /* ES6 */
 2 var arr = [1, 2, 3];
 3 
 4 arr.filter((item) => {
 5     return item % 2;
 6 });
 7 
 8 
 9 /* ES5 */
10 var arr = [1, 2, 3];
11 
12 arr.filter(function (item) {
13     return item % 2;
14 });

1. Node.js环境

Node.js环境下可使用 babel-cli 命令行工具进行转换,首先安装这个工具 npm i -g babel-cli

要进行转码,得先配置babel转码的方式,根目录下添加一个配置文件 .babelrc

Win7下直接添加会报错,这里可以用命令行的方式改名

文件中指明要转换的方式

{
    "presets": [
        "es2015"
    ]
}

其中,presets表示一些将要使用到的插件集合,更多用法

用到的es2015插件还得先安装好

试着转码一下

可以将结果指定输出到某个文件

还可以指定目录

可以像Node那样直接在命令行编写代码

查看 更多命令参数

2. 浏览器环境

在浏览器环境下也可以进行ES6的转码,不过网页端实时的转换或多或少会影响性能,所以最好时网页直接使用转换好的代码

可直接引入standalone提供的 转码脚本文件

  <script src="babel.min.js"></script>
    <script type="text/babel">
        var arr = [1, 2, 3];

        arr.filter((item) => {
            return item % 2;
        });

        console.log(arr);
    </script>

二、使用浏览器的原生支持

使用阮爷的es-checker检测各特性的支持度

可见在Chrome最新版下支持度还是挺好的,所以我们可以直接在Chrome下练习基本的ES6语法

三、使用Node.js的原生支持

同样使用es-checker模块来检测支持度

所以也可以在Node环境下练手支持的新特性

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Web 开发

nginx自动补齐结尾斜杠

在Nginx下面,每次访问WordPress的后台,如果不带上结尾斜杠,就会在你访问后台wp-admin/下面的二级页面的时候,出现404错误。

18500
来自专栏增长技术

获得一个Git仓库

既然我们现在把一切都设置好了,那么我们需要一个Git仓库。有两种方式可以得到它:一种是从已有的Git仓库中 clone(克隆,复制);还有一种是新建一个仓库,把...

10010
来自专栏杂烩

Mongodb linux下安装 原

#对mongo实例来说,每个host允许链接的最大链接数,这些链接空闲时会放入池中,如果链接被耗尽,任何请求链接的操作会被阻塞等待链接可用,推荐配置10

24440
来自专栏章鱼的慢慢技术路

Linux命令_搜索文件

20250
来自专栏个人随笔

eclipse 设置文本模板

1.开打点击Windows选择Prederences选项卡 ? 2.弹出窗口,选择Java选项卡下的Code Style选项卡 ? 3.选择Code Templ...

37390
来自专栏数据分析

Windows PowerShell 学习之——Cmdlet处理生命周期

这一次介绍一下Cmdlet处理过程的生命周期 1. 概述 下图展示Windows PowerShell怎样处理一个管道请求指令。 这个流程包括: 指令参数(pa...

29660
来自专栏拂晓风起

cocos2d-js 3.0 rc0 编译release报错 value for keystore is not valid. it must resolve to a single path

12220
来自专栏pangguoming

linux如何修改文件或目录的权限(chmod)

chmod命令是linux上用于改变权限的命令,-R 是递归遍历子目录,因为你要操作的文件使用的*通配符。777,第一个7代表文件所属者的权限,第二个7代表文件...

394100
来自专栏逻辑熊猫带你玩Python

Linux | 像Windows一样,复制移动重命名等操作

小编在上一篇文章中讲到Linux下的目录操作,一共讲了三个命令,分别是cd、ls、和pwd。但是这里有个问题,既然目录就是文件夹,那么,怎样新建或者删除文件夹,...

61120
来自专栏性能与架构

理解 Linux shell 中的一个方言:2>&1

前言 在使用 linux 命令或者 shell 编程时,这个用法常会遇到 2>&1 如果是刚开始接触Linux,这个东西的确不好理解,因为他没有直观的含义,不像...

314120

扫码关注云+社区

领取腾讯云代金券