前端构建(打包)工具发展史

大多同学的前端学习路线:三件套+框架+慢慢延伸到其他,在这个过程中,有一个词出现的频率很高:webpack 。

作为一个很出名的前端构建工具我们在网上随便一搜,就会有各种教程:loader plugin entry吧啦吧啦。

但是为什么会有它,为什么我们离不开它呢? 如何理解“构建工具”四个字?它和“打包工具”又有什么关系呢?用法和api其实很好找,但是这几个问题的答案找起来却有点难度:相关的解释都零零散散,于是决定做这么一个分享,希望能以不一样的角度带给大家新的启发。 以上就是写这篇文章的初衷

目录

何为前端构建(打包)工具

构建工具发展史

 1.石器时代

2.蒸汽时代

3.近现代

4.现代

回顾


何为前端构建(打包)工具

现代的前端构建主要包括两部分:transformbundle

1.transform(代码转换): 的作用就是将 TypeScript/JavaScript/JSX 等高级语法 (es6语法浏览器直接运行可能会不兼容)转化适合浏览器/Node.js 运行的相关标准的 javascript 的过程。

2.bundle(代码打包):从开发者设置的入口出发,分析模块依赖,加载并将各类资源最终打包     成1个或多个文件。

所以,“打包工具”是“构建工具”的一部分。

构建工具发展史

接下来会按照前端发展为时间线来进行讲解,以前端大事件为节点进行分割,来分析讲解当时的前端困境以及对应的构建情况。

前端构建(打包)工具发展史_第1张图片

 1.石器时代

标志性事件:1990年浏览器的诞生。

在这段时间,除了浏览器,还诞生了很多东西:WWW(World Wide Web)的诞生、JavaScript的诞生、W3C、PHP......

此时的前端:那个时候页面基本是纯静态的或者服务端输出 没有专业的前端,页面全是由后端开发 在很长的一段前端历史里,是不存在打包/构建这个说法的。

2.蒸汽时代

2.1标志性事件:2005年AJAX被拾起。

ps:XMLHttpRequest是2000年就有了,但是由于推广以及存在的问题(需要浏览器提供支持,存在跨域问题),导致它刚开始并没有被人们注意,到 2005 年 Ajax 和 Web 2.0 变得流行才被人注意。

为什么说AJAX对前端具有非凡意义呢?

想象一下,之前前端页面展示在浏览器中 是后端一整个页面发过来,有数据更改,后端改了之后,把一整个新的页面再发过来(也就指常说的:页面整个刷新)。

有了ajax之后,发过来页面之后,如果有更新,只需要网络交互有更改的地方

也就是:整个页面刷新---->部分刷新(将页面/呈现和数据分离!交互的粒度变小了)    

意味着可以把以前一些服务器负担的工作转嫁到客户端

js能做的事愈来愈多,前端开发者开始往页面里插入各种库和插件,我们的 js 文件程指数倍的开始增加。

2.2此时遇到的问题

1.运行环境限制:js作为一门脚本语言,只能在浏览器运行(没有node的时候),只能通过

你可能感兴趣的:(前端,javascript,ajax,前端框架,webpack)