Press "Enter" to skip to content

Tag: a-wgp

从零开始为Web项目定制构建系统(五)Todo SPA

这是前端开发练习项目《a-wgp》开发系列文章中的一篇,理论在这,源码在这

前一课我们总算开发了一个完整的前端SPA,功能相当的“小儿科”,这一课我们计划在此基础之上将其拓展为一支较有用的SPA程序。注意到本课完成为止,我们的构建系统没有更新过(Git也没有),因为我们的程序还相当的原始和简单,只使用原始JS API,后面会看到构建系统的升级。

从零开始为Web项目定制构建系统(四)——Hello XXXX的SPA版(下)

这是前端开发练习项目《a-wgp》开发系列文章中的一篇,理论在这,源码在这

前一课小结SPA理论和工作前提,现在开始本课正题——多页网站改造为单页应用(MPA的SPA改造)。

根据前面的理论的指引,我们的改造概略以下几点:

  • 第一,将网页(或部分交互功能)转换为JS view对象,「界面渲染」 转到前端(使用JS 动态操作DOM);
  • 第二,创建全局的JS router对象,负责应用会话导航,将 「会话路由」 转到前端;
  • 第三,创建一个app的对象,表征应用程序主体,管理(初始化)前两个对象;

我们再看看这个常规完整的SPA体系结构图:

服务端交换和 Model都不是必须,本课简单交互功能不需这些组件。

从零开始为Web项目定制构建系统(四)——Hello XXXX的SPA版(上)

这是前端开发练习项目《a-wgp》开发系列文章中的一篇,理论在这,源码在这

截至上一版本的项目实验,我们实例项目(a-wgp)的项目功能、构建系统和版本跟踪系统 都有了基本的构造,包括:

  • 第一,项目功能 是 一个简单的动态交互页;
  • 第二,构建系统丰富了build和start 构建任务的功能;
  • 第三,理顺了版本跟踪流程,包括本地私有分支、公共分支和远程库分支的管理;

这些基础功能构造,足以满足一个 由多人协作的中小型动态网站项目 的开发。接着这一版本我们将它转换SPA,一种最基础的SPA程序构造。

从零开始为Web项目定制构建系统(三)——简单交互页

这是前端开发练习项目《a-wgp》开发系列文章中的一篇,理论在这,源码在这

我们现在已经给项目添加了git系统,为 项目管理 打好了基础条件。接下来的一个版本继续完善「构建系统」的形式,并给wgp添加少许复杂度,做一个完整的交互页面。

wgp项目新版本功能计划如下:

  • 第一,充实build任务,划出独立的build目录,将发布版与开发版分开;添加clean反向清理任务;
  • 第二,start 任务除了启动http server,还打开浏览器;
  • 第三,添加热加载功能,不用每次修改都重新手动刷新浏览器;如 LiveReload / watch
  • 第四,添加交互行为,类似hello XXXX!

定制实验项目的计划指导

至此,「我们的定制系列」有了一定的发展模式——都是给项目的build sys完整形式,并增强功能(注意构建系统和目标应用程序功能是一对一)。「我们的系列」最后的一个目标是定制出高效的「React项目构建系统」,然而由此(简单交互页)至最后目标(React SPA)之间,还有几个版本的「构建系统」,每个版本都计划“生长”些什么,是没有严格指引的。而我们为了更好为了下一个版本作计划,我们需要这种指引。

从零开始为Web项目定制构建系统(二)——版本跟踪系统

这是前端开发练习项目《a-wgp》开发系列文章中的一篇,理论在这,源码在这

「git版本跟踪系统」和项目「构建系统」位于同一个工作目录,然而,git版本跟踪系统 是完全独立于「构建系统」的,是项目管理任务中重一项任务。版本跟踪看《Why Use a Version Control System?》和《what-is-version-control》。

不管怎样,版本跟踪任务 还是现代软件项目管理、构建、协作和分享的重要一环。在继续给我们的构建系统增加功能之前,先将为它添加版本跟踪系统(或者叫加入到项目管理之中)。

EM:「项目目录」是多个逻辑任务的宿主,版本管理,和软件构建是软件管理并行的两个任务。

从零开始为Web项目定制构建系统(一)——静态页面

这是前端开发练习项目《a-wgp》开发系列文章中的一篇,理论在这,源码在这

Web开发项目都需要一个构建系统(构建工具链),相信很多人,无论是通过实践学习前端开发,还是开始一项新商业软件项目,他们一般直接「使用现成的构建工具」作为新项目的构建工具,例如一些流行的脚手架,或者项目模板,鲜有人细究构建工具的内部构成原理。原因有几:

  • 第一,认为没有必要重发明轮子;
  • 第二,构建工具内部原理与软件编程无关涉;
  • 第三,成本;

研究构建工具内部构成的意义

而我个人认为——研究构建工具的构成——还是很有必要,这个道理有点像学前端不能只学应用框架(例如react vue),原生JS和浏览器API还是必修的;这是一个理由:了解构建工具内部结构,有助扫除「后继开发构建过程」出现的问题;

第二个理由,虽然构建工具的使用与编程是无涉的,但构建工具是用来「构建」目标程序,「构建工具」的特性与「程序」特性是一一对应的,「认识构建工具」是我们对自己的任务——程序组成的性质——深入认识的一个极好的侧面。

总得来说,构建工具的认识是很有必要的,它能提高我们的专业性——对自己的工具和任务有特别细致的了解。