本节咱们来学习配置 ES6
的 JavaScript 运行开发环境,通过 babel
把 ES6
转码为 ES5
。
抉择一个编辑器
首先咱们抉择一个编辑器,而后在这个编辑器下配置 ES6
的 JavaScript 运行环境。这里咱们抉择 Visual Studio Code
,当然也能够抉择其余的编辑器,例如 WebStorm
,大家能够依据本人的爱好抉择。
如果咱们要应用 Visual Studio Code
,能够到官网下载,地址为:https://code.visualstudio.com/。大家依据需要下载 VSCode
相应版本的安装包,而后进行装置。
装置好后的 VSCode
界面如下所示:
下载并装置 Node.js
接着咱们须要下载并装置 Node.js
,官网下载地址为:https://nodejs.org/en/,下载并装置好后,能够通过 node -v
来查看 Node.js
的装置版本,如果呈现版本号则示意装置胜利,例如:Node.js
中含有 npm
软件包管理工具,所以咱们装置好 Node.js
的同时就装置好了 npm
。
创立我的项目
而后咱们能够创立一个我的项目,执行 npm init
初始化命令,依据显示的问题输出配置信息,如果全副默认抉择默认值,能够间接执行 npm init -y
命令,这样就不必再一次次按回车了。执行完命令之后,我的项目根目录下会生产一个 package.json
文件,能够依据本人的须要进行批改这个文件的配置。
为了方便管理,咱们通常会在我的项目中创立两个文件夹,一个文件夹为 src
寄存源码文件,还有一个 dist
文件夹搁置编译后或者压缩后的代码。
装置 babel
babel
是一个宽泛应用的 ES6
转码器,能够将 ES6
代码转为 ES5
代码,从而在老版本的浏览器执行。这意味着,咱们能够用 ES6
的形式编写程序,又不必放心现有环境是否反对。
上面是在我的项目根目录下装置 babel
的命令:
npm install --save-dev babel-preset-es2015 babel-cli
装置实现后,我的项目中会新增一个 package-lock.json
文件和 node_modules
文件夹。
配置文件.babelrc
babel
的配置文件是 .babelrc
,寄存在我的项目的根目录下。应用 babel
的第一步,就是配置这个文件。
在根目录创立这个文件,而后写入如下代码:
{"presets":[ "es2015"],
"plugins":[]}
而后咱们就能够开始将 ES6
转换为 ES5
,例如在 src
文件夹下创立一个 index.js
文件,输出一些内容:
let a = 100;
console.log(a);
而后执行 babel src/index.js -o dist/bundle.js
命令,将 ES6
语法转换为 ES5
语法。
此时会在在 dist
目录下生成一个 bundle.js
文件,文件内容如下所示:
"use strict";
var a = 100;
console.log(a);
咱们也能够间接在 VSCode
中执行 index.js
文件中的内容,点击 Run Code
,终端中会输入代码的执行后果,上述代码最终会输入“100”。
在 HTML 文件中引入 JS 代码
如果咱们要在 HTML
文件中引入 JS
代码,能够在我的项目根目录下创立一个 index.html
文件,而后编写文件内容。要疾速创立一个 HTML
模板,能够先输出一个 !
,而后按 tab
键,创立好的内容如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
咱们在 <body>
体现中通过 <script>
引入 JS
文件,留神引入的是 dist
目录下的文件,也就是 bundle.js
。这个文件中就是 ES6
转换后的 ES5
代码。