VSCode搭建ES6开发环境

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>

index.js加入以下代码

const tmp = "hello, ES6";
alert(tmp);

保存之后,使用浏览器打开index.html,浏览器上方就可以看到一个弹框了。这里需要注意的是,浏览器最好使用Chrome新版本,如果版本很老,可能不支持ES6的新特性。如果是在macOS里,也可以使用Safari浏览器。

iShot2020-12-19 15.15.28

至此,ES6的开发学习环境已经搭建完成了,开始愉快地学习ES6了。

ES6学习资料推荐

ES6入门教程

https://es6.ruanyifeng.com/#README

ES6教程

https://www.runoob.com/w3cnote/es6-tutorial.html

Live Server插件

在以上的开发环境中,每次写完ES6代码,都需要手动保存,然后手动刷新浏览器,才能看到最新的代码效果。怎么解决这个问题,减少重复的工作?VSCode有个插件可以帮到你,在插件市场搜索Live Server,安装之后,

右击index.html就可以看到多了两个菜单,点击Open with Live Server就可以在浏览器里面实时看到代码最新改动带来的变化。每次代码写完,保存之后,浏览器都会自动刷新,这个插件很好用。

有些人觉得前端技术含量低,其实不然,学好前端开发,也需要掌握大量知识,前端也有很多有挑战的东西。学习前端开发,是一个较长的时间过程,但只要有了学习资料,有了开发学习环境,积累一段时间的学习,一定会有很大进步。如果对前端开发有兴趣,那就尽快学习吧!

泳装美女

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值