从零开始为Web项目定制构建系统

462 阅读3分钟

======================== nakeman.cn/engineering…

相信很多人(包括初学者),无论是通过实践学习开发,还是真的开始一项商业软件项目,他们一般直接「使用现成的构建工具」作为新项目的构建工具。鲜有人细究构建工具的内部构成。原因有几: 第一,认为没有必要重发明轮子; 第二,构建工具内部与软件编程无关涉; 第三,成本;

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

而我个人认为还是很有必要,这个道理有点像学前端不能只学应用框架(例如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 项目,名为a-wgp( a web gui program)。并且开发机器上已经安装了最新的Nodejs平台。

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

github.com/http-party/…

配置 a-wgp build sys

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

...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1" ,
    "start":"http-server 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