ES6中如何配置运行环境

原创
10/22 11:55
阅读数 38

本节我们来学习配置 ES6 的 JavaScript 运行开发环境,通过 babelES6 转码为 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 代码。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部