VSCode搭建ES6开发环境

零丁若叹

已于 2022-11-27 20:16:04 修改

阅读量5k

点赞数 3

于 2020-12-19 16:13:03 首次发布

本文链接：https://blog.youkuaiyun.com/u011608357/article/details/111405840

版权

开发环境和工具专栏收录该内容

37 篇文章

订阅专栏

VSCode搭建ES6开发环境

javascript是一种高级脚本语言，常用于web应用开发，为网页开发添加动态交互。一个完整的网页通常由三部分组成，html，css和javascript，html主要完成静态内容的，比如页面布局和控件添加，css主要完成网页内容样式，比如添加颜色等，javascript主要完成交互，比如用户点击了一个按钮，接下来的操作由javascript完成。对于想入门前端开发的同学来说，javascript是必须学习的语言。

ECMAScript是什么

ECMAScript是javascript的语言标准，它规定了javascript有什么特性，javascript是其对应的具体实现。ECMAScript首版1997年发布，2011年发布了5.1版本，2015年发布了ECMAScript 2015（ES2015），也被称为ES6，2016年发布了ECMAScript 2016（ES2016），也被称为ES7，2017年发布了ECMAScript 2017（ES2017），也被称为ES8。2018年，2019年，2020年相继发布了ES9，ES10，ESS11。

ES6开发环境搭建

为什么搭建ES6开发环境，而不是最新的ES11呢？这和我们的浏览器版本有关，在新的语言特性发布后，浏览器还不能支持特性。即使新版本的浏览器支持了ES11，在短期内浏览器老版本依然占据大部分的市场份额，大部分浏览器将不会正确执行我们的代码。ES6标准经过多年的发展，主流的浏览器基本支持了绝大部分ES6特性。在网上搜索ES6相关的开发环境，大部分采用了webpack打包，借助于babel插件，将ES6代码转换为ES5代码，然后交给浏览器执行，这么做的目的是考虑浏览器的兼容性。从当前新版本浏览器对ES6支持的情况看，如果你想搭建一个开发学习的环境，没必要那么麻烦，直接写ES6交给浏览器执行就可以了。

学习ES6之前，最好先学习javascript。ES6是在javascript基础上添加了很多语法特性形成的。有了javascript基础，熟悉ES6是非常快的。如果你还不了解javascript，建议先看看相关资料，再按照本篇的介绍搭建ES6开发学习环境。

搭建ES6开发环境，整体是非常简单的。

首先需要下载VSCode，https://code.visualstudio.com

建立ES6文件夹，文件夹下面增加index.html，index.js两个文件。

Index.html加入以下代码，这里面比较关键的是这行，注意文件路径要写对，./index.js代表当前目录下面的index.js文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./index.js"></script>
</body>
</html>