好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

ES6 环境配置

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 语法本身。

查看更多关于ES6 环境配置的详细内容...

  阅读:49次

上一篇

下一篇

第1节:ES6+ 简介    第2节:ES6 环境配置    第3节:ES6+ let    第4节:ES6+ const    第5节:ES6+ 展开语法    第6节:ES6+ 剩余参数    第7节:ES6+ 解构赋值    第8节:ES6+ 模版字符串    第9节:ES6+ 箭头函数    第10节:ES6+ 数值扩展    第11节:ES6+ isFinite()&isNaN()    第12节:ES6+ Number 对象的方法    第13节:ES6+ Math 对象的扩展    第14节:ES6+ includes()    第15节:ES6+ 字符串的扩展    第16节:ES6+ startsWith()    第17节:ES6+ endsWith()    第18节:ES6+ repeat()    第19节:ES6+ padStart()    第20节:ES6+ padEnd()    第21节:ES6+ trim()    第22节:ES6+ Array.from()    第23节:ES6+ of()    第24节:ES6+ find()和findIndex()    第25节:ES6+ copyWithin()    第26节:ES6+ fill()    第27节:ES6+ isArray()    第28节:ES6+ 对象的扩展    第29节:ES6+ flat()    第30节:ES6+ 可选链操作符    第31节:ES6+ Object.is()    第32节:ES6+ Object.assign()    第33节:ES6+ Object.keys()    第34节:ES6+ Object.values()    第35节:ES6+ Object.entries()    第36节:ES6+ 数据结构扩展    第37节:ES6+ Set    第38节:ES6+ WeakSet    第39节:ES6+ Map    第40节:ES6+ WeakMap    第41节:ES6+ Symbol    第42节:ES6+ for...of    第43节:ES6+ 迭代协议    第44节:ES6+ 实现一个简版的 Promise    第45节:ES6+ Promise 基础    第46节:ES6+ Promise 进阶    第47节:ES6+ Generator 基础    第48节:ES6+ Generator 函数应用    第49节:ES6+ async/await    第50节:ES6+ Class 前置知识    第51节:ES6+ Class    第52节:ES6+ Proxy    第53节:ES6+ Reflect(一)    第54节:ES6+ Reflect(二)    第55节:ES6+ 模块化(一)    第56节:ES6+ 模块化(二)    第57节:ES6实战1-实现Vue3 reactive 源码    第58节:ES6实战2-实现 Vue3 effect 源码    第59节:ES6 实战2-封装请求    第60节:ES6+ 实战3-代码整洁之道    第61节:ES6 Map原理分析    第62节:ES6module语法加载importexport    第63节:ES6的循环与可迭代对象示例详解