关于javascript:ES6中如何配置运行环境

4次阅读

共计 1595 个字符，预计需要花费 4 分钟才能阅读完成。

本节咱们来学习配置 ES6 的 JavaScript 运行开发环境，通过 babel 把 ES6 转码为 ES5。

首先咱们抉择一个编辑器，而后在这个编辑器下配置 ES6 的 JavaScript 运行环境。这里咱们抉择 Visual Studio Code，当然也能够抉择其余的编辑器，例如 WebStorm，大家能够依据本人的爱好抉择。

如果咱们要应用 Visual Studio Code，能够到官网下载，地址为：https://code.visualstudio.com/。大家依据需要下载 VSCode 相应版本的安装包，而后进行装置。

装置好后的 VSCode 界面如下所示：

接着咱们须要下载并装置 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 是一个宽泛应用的 ES6 转码器，能够将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，咱们能够用 ES6 的形式编写程序，又不必放心现有环境是否反对。

上面是在我的项目根目录下装置 babel 的命令：

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

装置实现后，我的项目中会新增一个 package-lock.json 文件和 node_modules 文件夹。

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 代码，能够在我的项目根目录下创立一个 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 代码。

正文完