选择一个编辑器

首先我们选择一个编辑器&＃xff0c;然后在这个编辑器下配置 ES6 的 Javascript 运行环境。这里我们选择 Visual Studio Code&＃xff0c;当然也可以选择其他的编辑器&＃xff0c;例如 WebStorm&＃xff0c;大家可以根据自己的喜好选择。

如果我们要使用 Visual Studio Code&＃xff0c;可以到官网下载&＃xff0c;地址为&＃xff1a;https://code.visualstudio.com/。大家根据需求下载 VSCode 相应版本的安装包&＃xff0c;然后进行安装。

安装好后的 VSCode 界面如下所示&＃xff1a;

下载并安装Node.js

接着我们需要下载并安装 Node.js&＃xff0c;官网下载地址为&＃xff1a;https://nodejs.org/en/&＃xff0c;下载并安装好后&＃xff0c;可以通过 node -v 来查看 Node.js 的安装版本&＃xff0c;如果出现版本号则表示安装成功&＃xff0c;例如&＃xff1a;

Node.js 中含有 npm 软件包管理工具&＃xff0c;所以我们安装好 Node.js 的同时就安装好了 npm。

创建项目

然后我们可以创建一个项目&＃xff0c;执行 npm init 初始化命令&＃xff0c;根据显示的问题输入配置信息&＃xff0c;如果全部默认选择默认值&＃xff0c;可以直接执行 npm init -y 命令&＃xff0c;这样就不用再一次次按回车了。执行完命令之后&＃xff0c;项目根目录下会生产一个 package.json 文件&＃xff0c;可以根据自己的需要进行修改这个文件的配置。

为了方便管理&＃xff0c;我们通常会在项目中创建两个文件夹&＃xff0c;一个文件夹为 src 存放源码文件&＃xff0c;还有一个 dist 文件夹放置编译后或者压缩后的代码。

安装babel

babel 是一个广泛使用的 ES6 转码器&＃xff0c;可以将 ES6 代码转为 ES5 代码&＃xff0c;从而在老版本的浏览器执行。这意味着&＃xff0c;我们可以用 ES6 的方式编写程序&＃xff0c;又不用担心现有环境是否支持。

下面是在项目根目录下安装 babel 的命令&＃xff1a;

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

安装完成后&＃xff0c;项目中会新增一个 package-lock.json 文件和 node_modules 文件夹。

配置文件.babelrc

babel 的配置文件是 .babelrc&＃xff0c;存放在项目的根目录下。使用 babel 的第一步&＃xff0c;就是配置这个文件。

在根目录创建这个文件&＃xff0c;然后写入如下代码&＃xff1a;

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

然后我们就可以开始将 ES6 转换为 ES5 &＃xff0c;例如在 src 文件夹下创建一个 index.js 文件&＃xff0c;输入一些内容&＃xff1a;

let a &＃61; 100; console.log(a);

然后执行 babel src/index.js -o dist/bundle.js 命令&＃xff0c;将 ES6 语法转换为 ES5 语法。

此时会在在 dist 目录下生成一个 bundle.js 文件&＃xff0c;文件内容如下所示&＃xff1a;

"use strict";var a &＃61; 100;console.log(a);

我们也可以直接在 VSCode 中执行 index.js 文件中的内容&＃xff0c;点击 Run Code&＃xff0c;终端中会输出代码的执行结果&＃xff0c;上述代码最终会输出“100”。

在HTML文件中引入JS代码

如果我们要在 HTML 文件中引入 JS 代码&＃xff0c;可以在项目根目录下创建一个 index.html 文件&＃xff0c;然后编写文件内容。要快速创建一个 HTML 模板&＃xff0c;可以先输入一个 !&＃xff0c;然后按 tab 键&＃xff0c;创建好的内容如下所示&＃xff1a;

ES6

我们在 表现中通过 引入 JS 文件&＃xff0c;注意引入的是 dist 目录下的文件&＃xff0c;也就是 bundle.js。这个文件中就是 ES6 转换后的 ES5 代码。