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

时间 2020-03-17

标签开始 web 项目定制构建系统栏目 HTML 繁體版

原文原文链接

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

相信不少人（包括初学者），不管是经过实践学习开发，仍是真的开始一项商业软件项目，他们通常直接「使用现成的构建工具」做为新项目的构建工具。鲜有人细究构建工具的内部构成。缘由有几：第一，认为没有必要重发明轮子；第二，构建工具内部与软件编程无关涉；第三，成本；前端

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

而我我的认为仍是颇有必要，这个道理有点像学前端不能只学应用框架（例如react vue），原生JS和浏览器API仍是必修的；这是一个理由，了解构建工具内部结构，有助扫除「后继开发构建过程」出现的问题；vue

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

总得来讲，构建工具的认识是颇有必要的，它能提升咱们的专业性——对本身的工具和任务有特别细致的了解。react

如何开始？

虽然「学习构建工具的制做」颇有意义，可是由于它很复杂，吓唬了很多人，研究怎么开始，是一个大问题。git

因为构建系统与被构建的软件程序一对一，软件程序复杂，致使构建系统也比较复杂。故我觉得，由简入繁是个不错的法子，从最简单的 Web项目开始，而后不断增长复杂度，一步一步的消化。复杂度由几个方面发展：第一，Web项目功能增长；第二，构建的效率的增长；github

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

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

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

最基本的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
复制代码