前端模塊管理器簡介

時間 2019-11-08

標籤前端模塊管理器簡介简体版

原文原文鏈接

模塊化結構已經成爲網站開發的主流。css

製做網站的主要工做，再也不是本身編寫各類功能，而是如何將各類不一樣的模塊組合在一塊兒。html

瀏覽器自己並不提供模塊管理的機制，爲了調用各個模塊，有時不得不在網頁中，加入一大堆script標籤。這樣就使得網頁體積臃腫，難以維護，還產生大量的HTTP請求，拖慢顯示速度，影響用戶體驗。前端

爲了解決這個問題，前端的模塊管理器（package management）應運而生。它能夠輕鬆管理各類JavaScript腳本的依賴關係，自動加載各個模塊，使得網頁結構清晰合理。不誇張地說，未來全部的前端JavaScript項目，應該都會採用這種方式開發。jquery

最先也是最有名的前端模塊管理器，非RequireJS莫屬。它採用AMD格式，異步加載各類模塊。具體的用法，能夠參考我寫的教程。Require.js的問題在於各類參數設置過於繁瑣，不容易學習，很難徹底掌握。並且，實際應用中，每每還須要在服務器端，將全部模塊合併後，再統一加載，這多出了不少工做量。git

今天，我介紹另外四種前端模塊管理器：Bower，Browserify，Component和Duo。它們各自都有鮮明的特色，很好地彌補了Require.js的缺陷，是前端開發的利器。github

須要說明的是，這篇文章並非這四種模塊管理器的教程。我只是想用最簡單的例子，說明它們是幹什麼用的，使得讀者有一個大體的印象，知道某一種工做有特定的工具能夠完成。詳細的用法，還須要參考它們各自的文檔。npm

Bower

Bower的主要做用是，爲模塊的安裝、升級和刪除，提供一種統一的、可維護的管理模式。json

首先，安裝Bower。瀏覽器

1 　$ 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 component@1.0.0-rc5

上面代碼之因此須要指定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/normalize.css@3.0.1 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">

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。