Press "Enter" to skip to content

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

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

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

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

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

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

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

如何开始?

虽然「学习构建工具的制作」很有意义,但是因为它很复杂,吓唬了不少人,研究怎么开始,是一个大问题。

由于 构建系统 与被构建的软件程序一对一,软件程序复杂,导致构建系统也比较复杂。故我以为,由简入繁是个不错的法子,从最简单的 Web项目 开始,然后不断 增加复杂度,一步一步的消化。复杂度由几个方面发展:

  • 第一,Web项目功能增加;
  • 第二,构建的效率的增加;

最简单的Web程序及构建系统

最简单直观的「Web编程」要数在本地编辑源文件,然后通过浏览器打开观测编写的效果,然而这只适应于编写静态页面,无法开发远程功能,这不是一个完整的项目,开发很受限。完整的项目开发环境至少还要配置一个http服务器。由此可见,一个「完整的基础的Web 项目编程或构建环境」是有一些基本的条件的,http服务器是其中之一。另一个则是启动http服务的构建工具(自动化任务)。

至此我们可开始构想最基本的Web程序,及它的构建系统的构成。

最基本的Web程序

最简单的Web程序,当然是只有一个静态页面的“程序”,例如功能非常简单,只显示“hello world!”,没有界面状态,没有服务器会话数据;所以也不使用第三方框架,不必有CSS预处理;开发协助上,没有单元测试,不进行语法检测等。

最基本的构建系统

以上已经揭示,我们的构建系统有一些基本的有机组成——http服务器,和功能任务——自动化任务,「组建构建系统」需第三方技术,这里我们直接使用Nodejs作基础技术,它提供了简单的http server软件包,也有npm script接口技术可作自动化任务。

构建系统(后可称build sys)是一定的形式和形态,它的结构组成和形式属性,就像一支Web应用程序,但将构建系统看成是一种存在形式来学,用 和制作,是前所未有的,后面会看到,这个认识是非常重要的。

创建最基本的构建系统

现在我们假想创建一个Web 项目,名为a-wgp( a web gui program)。并且开发机器上已经安装了最新的Nodejs平台。并假设你已经掌握了基本 NPM的概念和使用。

准备build sys 最基础的环境

最基础环境当必选有一个「项目工作目录」,目录内保存有构建系统的配置数据,和项目源码数据:

$mkdir a-wgp && cd a-wgp
$ npm init -y
$ mkdir src
$ touch src/app.js src/index.html

安装http服务器(node 全局)

$ npm install http-server -g

配置 a-wgp build sys

在 package.json 中 配置构建系统的操作接口

...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1" ,
    "start":"http-server src"
  },
...

test任务是自动生成的。我们只配置了一个构建接口——start。由于我们只有一个静态的页面,没有“编译和转换”过程,也没有发布任务,所以直接使用src作为程序的运行根目录。后续复杂度增加会修正。

编辑index.html

正式编程,为应用程序写功能代码

...
<body>
<h1>hello world!!</h1>
</body>
...

最基本build sys 文件系统构成

[keminlau@localhost a-wgp]$ tree -a
.
├── package.json
└── src
    ├── app.js
    └── index.html

进行第一次构建使用

$ npm start

[keminlau@localhost a-wgp]$ npm start

> a-wgp@1.0.0 start /home/keminlau/react/a-wgp
> http-server src

Starting up http-server, serving src
Available on:
  http://127.0.0.1:8080
  http://192.168.10.120:8080
Hit CTRL-C to stop the server

小结

至此,一个较完整的构建系统 / Web项目生产环境已经制作完成。小结几点:

  • 第一,构建系统本身也是有一定的形式的(包括外用属性和内部组成),制作需要基础技术(例如本系统使用了Nodejs 和 npm script);
  • 第二,构建系统 和 Web项目是高度相关的,但是是有独立性的。在一个「项目数据目录」内,有构建系统的数据,也有项目源码数据,项目数据可以看成构建系统的有机组成;后面会看到构建系统有多种有机组成,例如test , build等,还有git也在「项目数据目录内」,但是git是完成独立于构建系统的,由此可是,「项目数据目录」有多个逻辑的宿主,这也为什么我们在github上看到的开源项目目录有很多“莫名”的文件数据的原因。

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *