ES6中如何配置运行环境

时间 2020-11-30

标签 html node npm json 浏览器 babel 编辑器工具学习 spa 栏目 JavaScript 繁體版

原文原文链接

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

选择一个编辑器

首先咱们选择一个编辑器，而后在这个编辑器下配置 ES6 的 JavaScript 运行环境。这里咱们选择 Visual Studio Code，固然也能够选择其余的编辑器，例如 WebStorm，你们能够根据本身的喜爱选择。node

若是咱们要使用 Visual Studio Code，能够到官网下载，地址为：https://code.visualstudio.com/。你们根据需求下载 VSCode 相应版本的安装包，而后进行安装。npm

安装好后的 VSCode 界面以下所示：
json

下载并安装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 文件，能够根据本身的须要进行修改这个文件的配置。babel

为了方便管理，咱们一般会在项目中建立两个文件夹，一个文件夹为 src 存放源码文件，还有一个 dist 文件夹放置编译后或者压缩后的代码。编辑器

安装babel

babel 是一个普遍使用的 ES6 转码器，能够将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，咱们能够用 ES6 的方式编写程序，又不用担忧现有环境是否支持。工具

下面是在项目根目录下安装 babel 的命令：学习

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

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

配置文件.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 代码。