three.js 使用NPM進行測試

這篇文章展示了如何將three.js置入node.js環(huán)境中， 這樣你就可以執(zhí)行自動化測試了。測試可以通過命令行或者類似Travis的CI工具來運行。

一句話概括

如果你習(xí)慣使用node和npm，

$ npm install three --save-dev

并將

const THREE = require('three');

添加到你的測試中。

從頭創(chuàng)建一個可測試的項目

如果你不太熟悉這些工具，下面是一個快速入門。（基于linux，在windows上的安裝過程會稍稍有點不一樣，不過NPM指令是相同的。）

基本設(shè)置

1. 安裝npm和nodejs。最簡單的方式一般像這樣

$ sudo apt-get install -y npm nodejs-legacy
# 修復(fù)默認(rèn)registry URL中任何SSL的問題
$ npm config set registry http://registry.npmjs.org/

2. 新建一個項目路徑

$ mkdir test-example; cd test-example

3. 讓npm為你創(chuàng)建一份新的項目文件：

$ npm init

在所有出現(xiàn)的提示中敲擊回車鍵來接受默認(rèn)值。 這樣，一份package.json就建立好了。


4. 嘗試啟動測試功能

$ npm test

當(dāng)然，這一定會失敗。 如果你檢查一下package.json，test script的定義是這樣的


"test": "echo \"Error: no test specified\" && exit 1"

添加mocha

我們將使用mocha。

1. 安裝mocha

$ npm install mocha --save-dev

你會注意到 node_modules/ 被創(chuàng)建了，并且你的依賴都出現(xiàn)在了這里面。 還有你的package.json被更新了，--save-dev指令向其中加入并更新了devDependencies屬性。


2. 編輯package.json來使用mocha進行測試。當(dāng)調(diào)用測試的時候，我們只想運行mocha并且生成一份詳細(xì)的報告。 默認(rèn)情況下這會運行 test/ 中的任何東西。 （如果項目中沒有 test/ 目錄的話，會導(dǎo)致npm報錯。你可以通過mkdir test來創(chuàng)建這個目錄）

"test": "mocha --reporter list"

3. 重新運行測試

$ npm test

現(xiàn)在應(yīng)該就能成功執(zhí)行了，生成類似 0 passing (1ms) 的報告。

添加three.js

1. 現(xiàn)在添加我們的three.js依賴
   

$ npm install three --save-dev

如果你需要three.js的其他版本，使用


$ npm show three versions

來確認(rèn)哪些是可用的。要讓npm使用正確的版本，執(zhí)行


$ npm install three@0.84.0 --save

（例子中用的是0.84.0）。 --save 指令將此加入項目的dependency而不是dev dependency。 更多信息請參閱這份文檔。


2. Mocha會在 test/ 目錄中尋找測試文件，所以我們先創(chuàng)建這個目錄：

$ mkdir test

3. 最后我們需要一份JS測試文件來運行。我們就添加一段簡單的測試程序，這段程序會檢驗three.js對象是否能正常工作。 在 test/ 目錄下創(chuàng)建verify-three.js包含以下代碼：

const THREE = require('three');
const assert = require("assert");

describe('The THREE object', function() {
  it('should have a defined BasicShadowMap constant', function() {
    assert.notEqual('undefined', THREE.BasicShadowMap);
  }),

  it('should be able to construct a Vector3 with default of x=0', function() {
    const vec3 = new THREE.Vector3();
    assert.equal(0, vec3.x);
  })
})

4. 最后再次通過$ npm test來測試。這次應(yīng)該能正確執(zhí)行上面的代碼，并且返回類似：

The THREE object should have a defined BasicShadowMap constant: 0ms
The THREE object should be able to construct a Vector3 with default of x=0: 0ms
2 passing (8ms)

加入你自己的代碼

你需要做下面三件事：

1. 為你的代碼寫一段測試程序來檢驗期望結(jié)果，并把它放在 test/ 目錄下。 這里有一個實際項目的例子。
2. 將你的代碼以nodejs承認(rèn)的方式導(dǎo)出，即可以通過require的方式引用。 參考這份代碼。
3. 在測試程序中通過require引入你自己的代碼，就像上面例子中我們通過require('three')來引入一樣。

第2、3條會根據(jù)你組織代碼的方式而改變。在上面給出的Physics.js的例子中，導(dǎo)出的部分在代碼的最末尾。 我們將module.exports賦值為一個對象:

//=============================================================================
// 為了在nodejs中可用
//=============================================================================
if (typeof exports !== 'undefined')
{
  module.exports = Physics;
}

處理依賴

如果你已經(jīng)在使用require.js或者browserify之類的便捷工具，就跳過這個部分。

一般來說，一個three.js項目將在瀏覽器中運行，瀏覽器會通過執(zhí)行一系列script標(biāo)簽來加載模塊。 你自己的文件不用考慮依賴的問題。然而在nodejs環(huán)境中，沒有一個關(guān)聯(lián)所有文件的index.html，所以你需要顯式地加載。

如果你要導(dǎo)出的模塊還依賴其他文件，你需要告訴node去加載它們。下面是一種方式：

1. 在你的模塊頂部，檢查是否處于nodejs環(huán)境中。
2. 如果是，那就顯式地聲明你的依賴。
3. 如果不是，你多半處于瀏覽器環(huán)境中。這時候你不需要做任何多余操作。

用Physics.js中的代碼舉例:

//=============================================================================
// 服務(wù)器端測試配置
//=============================================================================
if (typeof require === 'function') // 檢測nodejs環(huán)境
{
  const THREE = require('three');
  const MY3 = require('./MY3.js');
}