模組化結構已經成為網站開發的主流。
製作網站的主要工作,不再是自己編寫各種功能,而是如何將各種不同的模組組合在一起。
瀏覽器本身並不提供模組管理的機制,為了呼叫各個模組,有時不得不在網頁中,加入一大堆script標籤。這樣就使得網頁體積臃腫,難以維護,還產生大量的HTTP請求,拖慢顯示速度,影響使用者體驗。
為了解決這個問題,前端的模組管理器(package management)應運而生。它可以輕鬆管理各種JavaScript指令碼的依賴關係,自動載入各個模組,使得網頁結構清晰合理。不誇張地說,將來所有的前端JavaScript專案,應該都會採用這種方式開發。
最早也是最有名的前端模組管理器,非RequireJS莫屬。它採用AMD格式,非同步載入各種模組。具體的用法,可以參考我寫的教程。Require.js的問題在於各種引數設定過於繁瑣,不容易學習,很難完全掌握。而且,實際應用中,往往還需要在伺服器端,將所有模組合併後,再統一載入,這多出了很多工作量。
今天,我介紹另外四種前端模組管理器:Bower,Browserify,Component和Duo。它們各自都有鮮明的特點,很好地彌補了Require.js的缺陷,是前端開發的利器。
需要說明的是,這篇文章並不是這四種模組管理器的教程。我只是想用最簡單的例子,說明它們是幹什麼用的,使得讀者有一個大致的印象,知道某一種工作有特定的工具可以完成。詳細的用法,還需要參考它們各自的文件。
Bower
Bower的主要作用是,為模組的安裝、升級和刪除,提供一種統一的、可維護的管理模式。
首先,安裝Bower。
$ npm install -g bower
然後,使用bower install命令安裝各種模組。下面是一些例子。
# 模組的名稱 $ bower install jquery # github使用者名稱/專案名 $ bower install jquery/jquery # git程式碼倉庫地址 $ bower install git://github.com/user/package.git # 模組網址 $ bower install http://example.com/script.js
所謂"安裝",就是將該模組(以及其依賴的模組)下載到當前目錄的bower_components子目錄中。下載後,就可以直接插入網頁。
<script src="/bower_componets/jquery/dist/jquery.min.js">
bower update命令用於更新模組。
$ bower update jquery
如果不給出模組的名稱,則更新所有模組。
bower uninstall命令用於解除安裝模組。
$ bower uninstall jquery
注意,預設情況下,會連所依賴的模組一起解除安裝。比如,如果解除安裝jquery-ui,會連jquery一起解除安裝,除非還有別的模組依賴jquery。
Browserify
Browserify本身不是模組管理器,只是讓伺服器端的CommonJS格式的模組可以執行在瀏覽器端。這意味著透過它,我們可以使用Node.js的npm模組管理器。所以,實際上,它等於間接為瀏覽器提供了npm的功能。
首先,安裝Browserify。
$ npm install -g browserify
然後,編寫一個伺服器端指令碼。
var uniq = require('uniq'); var nums = [ 5, 2, 1, 3, 2, 5, 4, 2, 0, 1 ]; console.log(uniq(nums));
上面程式碼中uniq模組是CommonJS格式,無法在瀏覽器中執行。這時,Browserify就登場了,將上面程式碼編譯為瀏覽器指令碼。
$ browserify robot.js > bundle.js
生成的bundle.js可以直接插入網頁。
<script src="bundle.js"></script>
Browserify編譯的時候,會將指令碼所依賴的模組一起編譯進去。這意味著,它可以將多個模組合併成一個檔案。
Component
Component是Express框架的作者TJ Holowaychuk開發的模組管理器。它的基本思想,是將網頁所需要的各種資源(指令碼、樣式表、圖片、字型等)編譯後,放到同一個目錄中(預設是build目錄)。
首先,安裝Component。
$ npm install -g co[email protected]
上面程式碼之所以需要指定Component的版本,是因為1.0版還沒有正式釋出。
然後,在專案根目錄下,新建一個index.html。
<!DOCTYPE html> <html> <head> <title>Getting Started with Component</title> <link rel="stylesheet" href="build/build.css"> </head> <body> <h1>Getting Started with Component</h1> <p class="blink">Woo!</p> <script src="build/build.js"></script> </body> </html>
上面程式碼中的build.css和build.js,就是Component所要生成的目標檔案。
接著,在專案根目錄下,新建一個component.json檔案,作為專案的配置檔案。
{ "name": "getting-started-with-component", "dependencies": { "necolas/normalize.css": "^3.0.0" }, "scripts": ["index.js"], "styles": ["index.css"] }
上面程式碼中,指定JavaScript指令碼和樣式表的原始檔案是index.js和index.css兩個檔案,並且樣式表依賴normalize模組(不低於3.0.0版本,但不高於4.0版本)。這裡需要注意,Component模組的格式是"github使用者名稱/專案名"。
最後,執行component build命令編譯檔案。
$ component build installed : necolas/[email protected] in 267ms build : resolved in 1221ms build : files in 12ms build : build/build.js in 76ms - 1kb build : build/build.css in 80ms - 7kb
在編譯的時候,Component自動使用autoprefixer為CSS屬性加上瀏覽器字首。
目前,Component似乎處於停止開發的狀態,程式碼倉庫已經將近半年沒有變動過了,官方也推薦優先使用接下來介紹的Duo。
Duo
Duo是在Component的基礎上開發的,語法和配置檔案基本通用,並且借鑑了Browserify和Go語言的一些特點,相當地強大和好用。
首先,安裝Duo。
$ npm install -g duo
然後,編寫一個本地檔案index.js。
var uid = require('matthewmueller/uid'); var fmt = require('yields/fmt'); var msg = fmt('Your unique ID is %s!', uid()); window.alert(msg);
上面程式碼載入了uid和fmt兩個模組,採用Component的"github使用者名稱/專案名"格式。
接著,編譯最終的指令碼檔案。
$ duo index.js > build.js
編譯後的檔案可以直接插入網頁。
<script src="build.js"></script>
Duo不僅可以編譯JavaScript,還可以編譯CSS。
@import 'necolas/normalize.css'; @import './layout/layout.css'; body { color: teal; background: url('./background-image.jpg'); }
編譯時,Duo自動將normalize.css和layout.css,與當前樣式表合併成同一個檔案。
$ duo index.css > build.css
編譯後,插入網頁即可。
<link rel="stylesheet" href="build.css">
(完)