從零開始爲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
複製代碼