《D3.js資料可視化實戰手冊》—— 1.3 搭建一個基于NPM的開發環境

本節書摘來異步社群《d3.js資料可視化實戰手冊》一書中的第1章，第1.3節，作者： 【加拿大】nick qi zhu，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

d3.js資料可視化實戰手冊

如果你所在的項目是一個略複雜的資料展示項目，并且使用了為數不少的javascript庫，那我們之前讨論的那個簡單的解決方案可能就顯得有些褚小杯大，不能勝任了。在這一節當中，我們将展示一個使用了npm（node packaged modules，實際上就是javascript庫的代碼庫管理系統）的更加強大的系統。如果你像我一樣沒有耐心，想更快地嘗試本書最帶勁兒的部分，想學點秘傳招式，完全可以跳過這部分，如果想搭建一個産品開發環境，再回來看看這部分也不遲。

我們開始前要先確定npm已經安裝好了。在安裝node.js時，npm作為其中一部分也被安裝了。可以在<code>http://nodejs.org/download/</code>下載下傳node.js。選擇适合你作業系統的node.js，安裝完畢後，在終端視窗運作如下npm指令。

{

"name": "d3-project-template",

"version": "0.1.0",

"description": "ready to go d3 data visualization project template",

"keywords": [

],

"homepage": "",

"author": {

},

"repository": {

"dependencies": {

"devdependencies": {

}

npm install<code>`</code>

package.json檔案中絕大部分字段僅僅用于提供資訊，比如name、description、homepage、author和repository。如果你打算把自己的庫釋出到npm的代碼庫中，就要用到name和version字段。現在，我們在意的是dependencies和devdependencies字段。

dependencies字段描述了你的工程所用到的庫在運作時的依賴，它們可以使你的工程在浏覽器中正常運作。在這個簡單的例子中，對于d3我們隻有一個依賴。d3是d3在npm庫中釋出時使用的名字。版本号3.x标明該工程可以相容任意大版本為3的發行版，并且npm應該擷取大版本為3的最新的穩定釋出版本來滿足依賴。

圖像說明文字d3是個自滿足的庫，運作時對外部是零依賴。然而這并不意味着它不能跟其他javascript庫一起運作。作者平時也使用一些其他的庫以便讓自己的工作容易些，比如jquery、zepto.js、underscore.js和backbone.js。

devdependencies字段描述了庫在開發時（編譯時）的依賴。就是說，這個字段内羅列出來的庫檔案僅僅在建構工程時會用到，運作javascript工程時用不到它們。

執行npminstall可以自動觸發npm去下載下傳你工程中所引用的所有依賴，包括遞歸的下載下傳依賴的依賴。所有的依賴庫檔案會被下載下傳到node_modules檔案夾中，該檔案夾位于工程檔案夾中的根目錄裡。這些完成以後，就可以建立一個html檔案（跟我們之前建立的那個一樣），html檔案直接從node_modules/d3/d3.js來引用d3的javascript庫。

本節中的代碼可以在此處下載下傳，裡面包含了自動建構腳本。

工程中會有一些麻煩的地方，比如手動下載下傳javascript庫以時刻保持它們的版本更新。為了避免這些麻煩，使用npm是個行之有效的方式，可以拯救你于水火之中。當然，一些聰明的讀者可能已經發現了，使用這個方法可以把我們的“搭建環境”過程直接提升一個檔次。想象一下，你正在建構一個巨大的可視化工程，其中包含了上千行的javascript代碼，很明顯我們這裡所描述的簡單的搭建方式滿足不了這種情形。因為“子產品化的javascript開發”這個話題足夠寫本書了，是以這裡我們就不再讨論這方面的話題了，我們将把注意力放在資料可視化和d3上。如果你對這方面感興趣，可以看看這一節的代碼，裡面示範了如果實作一個子產品化的工程，當然也包含了自動建構腳本。在後面單元測試相關的章節中，我們會針對這個話題多講一些，示範一下，可以在某些方面增強環境，以便運作自動化單元測試。

前面提到過，你可以通過浏覽器直接打開html檔案來檢視可視化的結果，不過這種方式有一些局限性。一但我們需要從其他檔案中加載資料（後面的章節中我們就要這麼做了，這也很像你平時工作中的情形），由于浏覽器内建的安全機制，這種方式就不好用了。為了繞開這個安全限制，強烈建議搭建一個本地的http伺服器，用該伺服器來維護html頁面和資料檔案，而非直接從檔案系統加載。

搭建本地http伺服器

由于使用的作業系統不同，http伺服器的軟體包不同，搭建http伺服器的方法也很不同。這裡說幾種比較流行的搭建方式。

python簡易http伺服器

這是我最喜歡的方式。如果你的機器上已經安裝了python，通常unix/linux/mac os發行版上都有，直接運作下面的指令即可。

python –m http.server<code>`</code>

這個python小程式可以啟動一個http伺服器，然後你就可以通路該程式所在檔案夾中的所有檔案。這是目前所有作業系統中運作http伺服器最簡單的方式。

node.js http伺服器

安裝node.js之後（前面的小節中所做的搭建開發環境練習，包含了相應的内容），就可以搭建http-server子產品了。與python簡易http伺服器類似，通過該子產品，你可以從任意的檔案夾快速啟動一個輕量級的http伺服器。

安裝http-server子產品。

http-server .<code>`</code>

該指令可以啟動一個node.js驅動的http伺服器，預設端口号是8080，也可以用 -p 參數指定一個端口号。

圖像說明文字如果是在linux/unix/mac的作業系統中運作該指令，需要用sudo模式或者root權限來運作。

本文僅用于學習和交流目的，不代表異步社群觀點。非商業轉載請注明作譯者、出處，并保留本文的原始連結。