前言
近几年是前端大发展的时期，Vue,React,Babel,Webpack,Node.js,TypeScript等技术与概念层出不穷，着实让人眼花缭乱。
不过对于小白来说，刚入门时可以会被这些概念弄晕，而这些概念与JavaScript又是什么关系？在这篇文章，为你梳理一下上述的前端概念到底是什么以及它们之间的关系！
了解一下JavaScript语言
JavaScript是一门轻量级脚本语言，之所以说轻量级,是因为JavaScript并不是像C,Java等语言一样，用于编写大型项目的。
JavaScript最开始被设计出来，是为了能让HTML网页”动起来“，因此JavaScript是非常简单的，其核心语法非常精简，只包括两个部分：基本的语法构造（比如数据类型、操作符、控制结构、语句）和标准库（如Array、Date、Math等），而更复杂的功能则依赖于宿主所提供的API,比如Web浏览器提供的各种Document操作。
“
PS：JavaScript跟Java没有任何关系,刚开始叫LiveScript，后来为了更好地推广，才蹭Java的名气，改名为JavaScript。
”JavaScript与浏览器之间的关系
最开始，JavaScript被设计于运行在浏览器，浏览器是JavaScript脚本的宿主，因此JavaScript的脚本可以跟HTML脚本混在一起，由浏览器解析执行，而不需要编译。
在现代浏览器(如Chrome,Foxfire)中，都有一个专门解析JavaScript脚本的引擎,比如在Chrome浏览器，这种引擎中v8。
在浏览器中，JavaScript脚本可以获得以下几种能力：
除了在浏览器上执行之外，JavaScript脚本也可以在Node.js上运行，Node.js是一个运行在服务器上的基于Chrome V8引擎的JavaScript脚本运行环境。
提供了类似其他语言的从网络读取、访问数据库或文件系统等操作，因此基于Node.js，前端开发人员也可以像Java,PHP,Go等语言一样编写服务器端的服务。
入门案例:HellWorld
下面我们通过一个Hello World的案例，让你对JavaScript有一个基本的了解
方式一:有<script></script>标签写JavaScript脚本
你可以你可以在你电脑的任何目录下，创建一个以.html为后缀的文本，比如index.html，然后在该文档中写下如下的代码：
index.html
<!DOCTYPEhtml><html><body><script>alert(‘Hello,world!’);</script></body></html>方式二：通过引入外部脚本来实现
使用这种方式，我们需要多创建一个index.js的文件，并将JavaScript脚本写在这个文件当中，这种也是平常开发项目最常见的方式，因此在大型Web项目中，JavaScript脚本往往很长，需要专门存在在单独的文件当中，这种文件一般以.js为后缀。
index.js
alert(‘Hello,world!’);
index.html
<!DOCTYPEhtml><html><body><scriptscr=”./index.js”></script></body></html>ECMAScript和JavaScript
ECMAScript是JavaScript的语言规范，也就是说，JavaScript是按照ECMAScript规范开发出来的一门语言。
在学习前端时，常常会见到ES5和ES6这两个概念。
ES5表示ECMAScript的第五个版本。
ES6是一个泛指，含义是 5.1 版以后的JavaScript的下一代标准，是ES2016,ES2017,ES2018…等以年份发布版本的泛称。
框架与库：JQuery、Vue和ReactJQuery
JQuery是一个Javascript库，帮我们封装了很多的原生的Document操作和Ajax请求，提供更为方便的Api,但实际与Vue.js和React相比，JQuery和使用原生Document操作一样，都是需要开发人员自己操作HTML的Document。
React
用于构建用户界面的JavaScript库，与JQuery相比，React专门于UI层，因其响应式设计，因此能根据数据变化，自动渲染UI，使用React开发前端复杂项目时，也可以使用其组件将复杂项目执分，方便代码复用。
Vue.js
Webpack
Webpack是一个前端资源加载/打包的构建工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
在Webpack之前，还有gulp和grunt等编译打包的构建工具,另外也有由Vue.js团队亲自打造的下一代开发与构建Vite。
Babel
Babel是一个JavaScript编译器，这里的编译与C语言的编译不同，这里的编译是指将使用ES6语法编写的代码转为ES5语法规范，因此并不是所有的浏览器都支持ES6语法规范。
TypeScript
TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。不过使用TypeScript编写的脚本不能在浏览器直接运行，而是要通过TypeScript编译器或Babel转译为JavaScript代码。
小结
通过上面的讲述，我想你对纷繁的前端概念应该有一定认识和了解，希望通过上述讲解，能让你对前端有更好的了解！
