ES6 环境配置
1. 前言
前面我们对 ES6 进行了介绍,本章来介绍一下配置 ES6 的执行环境,用于学习 ES6。
现在市面上的大部分浏览器基本上都已经 支持 ES6 的绝大部分语法,但是有些语法需要进行转译,或者在特定的环境中才能运行。其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好,IE7~11 基本 不支持 ES6。
2. 运行环境
2.1 浏览器环境
我们最终写的 代码 都是在浏览器环境运行的,所以本教材的 ES6 代码 大部分都可以在高级浏览器的控制台中直接进行测试。本教程使用的浏览器是 Chrome 浏览器。首先我们需要到 官网 下载并安装 Chrome 浏览器,也可以直接使用 百度 下载。安装完后打开浏览器,进入浏览器的控制台,在控制台中就可以学习 ES6 语法了。具体可以看如下视频的操作步骤:
2.2 VS Code 中运行
VS Code 是微软推出的一款很强大的编辑器,它提供了丰富的 插件 系统,通过使用这些 插件 ,我们就可以很轻松地运行我们的 ES6 代码 。要在 VS Code 中运行 ES6 代码 ,需要 添加 以下几 内容 :
安装 NodeJS; 安装 VS Code 编辑器; 安装 Code Runner 插件 。
首先我们可以在 官网 下载最新的 Node 安装包,安装 NodeJS 会附带 npm 包管理器。Mac 用户 也可以使用 Homebrew 这个工具进行安装,执行命令:
brew install node
安装完 NodeJS 后需要下载 VS Code 编辑器,可以在 VS Code 官网 下载,下载完直接安装。安装完成后我们需要在 VS Code 的 插件 市场中 搜索 Code Runner,这是 一个 可以运行选中 代码 的 VS Code 插件 神器,更加方便地查看 ES6 代码 运行出来的结果,这个 插件 可以让我们更加细致地关注 代码 片段的运行情况。具体操作步骤我们可以看如下视频的演示:
2.3 Babel
babel 是现在市面上使用得最多的 一个 JavaScript 编译器,它可以把 ES6 语法编译成 ES5 语法,这样就可以让 ES6 代码 在 不支持 ES6 语法的低版本浏览器中运行了。
babel 的官网是 一个 国外网站,我们可以访问 国内的站点 基本 内容 是一致的,网站还进行了翻译,更适合国内同学使用。在试一试中我们可以看到 ES6 语法转化为 ES5 后是什么样的,更加明了地展示语法的编译过程。
3. 小结
本节学习了搭建 ES6 的两个运行环境,当然还可以使用 Webpack 进行搭建,后面在学习模块化和实战时会使用到,这里我们就使用最简单的两种方式来运行我们的 ES6 代码 。本教程的所有 代码 实例都是基于浏览器和 VS Code 两个环境下实现的。而且这两个环境配置简单上手快,让我们更加关注 ES6 语法本身。