初窥Web前端工程化:web-pack核心组件设计

开课吧开课吧科科2021-03-29 18:59

点赞
有用
分享分享

《Hello,World》与你一起改变世界。

无论我们是一个C++开发人员,还是一个JavaScript开发人员,又或是一个AngularJS专家......我们都是一名简单纯粹的程序员。

《Hello,World公开课》提供了这样的一个平台,一端集结业内名师大咖,一端集结追求技术极致的学员,以专业知识分享交流为桥梁,链接正在创造世界的一群科技主力们,向初心致敬,为技术发烧。

科技创造世界,世界正在由你改变!

从早期被人嘲讽为“切图仔”,到后来以原生JavaScript、JQue为开发工具,再到后来以Angular、Vue、React三大框架统治的时代,前端er从来没有停止过对前端工程化方面的探索。那么前端工程化到底是什么?

3月27日开课吧《Hello World公开课》,让我们和川哥一起去初窥Web前端工程化,看看在前端领域使用最多的打包工具Webpack核心组件是如何设计的。

为什么会有线上打包的需求

随着前端框架的不断涌现,工程师们的开发效率越来越高,开发环境从简单的浏览器打开HTML文件,到搭建本地静态资源服务器。开发流程也在不断的变化。为了更快更稳定的开发效率,出现针对前端开发中的某一环节进行优化改近的新工具,这推进了前端工程化的进展。

然而不管是从前还是现在,前端人员在进行开发时,大体上可以分为两部分:

代码逻辑的组织,形成代码语言(IDE工具);

代码文件处理,输出前端三剑客 - HTML,JS,CSS(Pack工具);

在整个前端工程化的潮流中,Node发挥了重要作用。无论我们是选择gulp,webpack 或者其他打包工具,构建我们的开发环境。我们都无法逃避Nodejs,都需要Nodejs给予我们的对文本处理的能力。当下前端开发的工程化工具都是基于Nodejs且运行于Nodejs 中的。

但是,假如脱离开舒适的Node工具体系,身为前端开发工程师,我们要适合做打包。有没有想过,浏览器环境下,IDE+编译打包放在一起会怎么样?基于此,在线编译器:web-pack应运而生。

在线编译器:web-pack

在线打包工具带来的最大一个好处就是,可以直接在页面上进行前端代码编译打包,生成可直接在页面即时预览的代码,如下图所示,如同Markdown一样,可以实时看到代码修改的结果。

代码

这就给前端开发带来了巨大的方便,试想下我们在做程序设计时,无论怎么尽可能的考虑可能会出现的程序能力不满足需求,设计总会有这样或者那样的问题。身为设计者的我们能做的是,最大程度满足场景中的需求。

那么在线打包的实现可以用在哪些场景中呢?下面我们列举了日常开发可能会用到的五个场景

跨框架共享组件(微件化);

组件物料平台(跨项目组件库);

Web-IDE;

脱离项目文件的约束;

多项目多团队大型协作开发组件库;

因为集成代码编辑器能力 + 代码编译功能。所以在团队协作开发中可以实现线上开发组件、组件预览,发布等功能,而组件管理平台可以让前端人员共同开发维护组件池。这极大的提升了前端开发工程师的开发效率。

Web-pack核心组成

接下来,我们来看看web-pack的核心组成部分。web-pack设计的核心逻辑是web-pack =  webpack + npm + Ide。注意,这里的web-pack≠webpack。webpack指的是基于Node.js可以实现打包能力的组件。

下面这张图是web-pack核心组成部分,我们可以看到,web-pack主要由IDE,编译,结果输出,实时预览四个部分组成。

web-pack

以编译模块为例,内部核心实现机制如下图所示,类似像.js这类文件输入后,经过Dep依赖模块,Compiler代码处理,Plugin开放时机这三个模块处理后,输出成浏览器可以运行的运行包。

编译模块

前面我们提到了依赖模块,这里我们用的是树形依赖递归的方式。通过解析树对依赖进行解析,然后触发编译,将依赖变量替换成文本后输出结果。

代码示例

除了依赖外,在设计中,还需要从兼容、降级方案、代码习惯、用户使用等多个维度来考虑,这里我们就不展开讲了。

讲师介绍

川哥,360前端Leader,FCC武汉社区组织者。

如果有同学对web-pack内容感兴趣,可以扫描下方二维码观看公开课回放视频呦!

公开课

更多《Hello,World公开课》尽在开课吧广场动态信息频道!

《Hello ,World公开课》是由开课吧推出的面向广大开发工程师的免费加餐课,集结业内名师大咖,聚焦热门技术和实战解决方案,以专业知识分享交流为桥梁,链接正在创造世界的一群科技主力们,向初心致敬,为技术发烧。无论你是初入职场的应届生,还是准备升职加薪的职场精英,相信这里都有你需要的养料。

有用
分享