88 < link type ="text/css " rel ="stylesheet " href ="page.css " />
99 </ head >
1010 < body >
11- < h1 > [name]</ h1 >
11+ < h1 > 使用NPM进行测试( [name]) </ h1 >
1212
1313 < p class ="desc ">
14- This article shows how to get three.js into a [link:https://nodejs.org/en/ node.js] environment so that you
15- can execute automated tests. Tests can be run on the command line, or by automated
16- CI tools like [link:https://travis-ci.org/ Travis].
14+ 这篇文章展示了如何将three.js置入[link:https://nodejs.org/en/ node.js]环境中,
15+ 这样你就可以执行自动化测试了。测试可以通过命令行或者类似[link:https://travis-ci.org/ Travis]的CI工具来运行。
1716 </ p >
1817
19- < h2 > The short version </ h2 >
18+ < h2 > 一句话概括 </ h2 >
2019
2120 < p >
22- If you're comfortable with node and npm,
21+ 如果你习惯使用node和npm,
2322 < code >
2423 $ npm install three --save-dev
2524 </ code >
26- and add
25+ 并将
2726 < code >
2827 var THREE = require('three');
2928 </ code >
30- to your test.
29+ 添加到你的测试中。
3130 </ p >
3231
33- < h2 > Create a testable project from scratch </ h2 >
32+ < h2 > 从头创建一个可测试的项目 </ h2 >
3433 < p >
35- If you're not familiar with these tools, here's a quick guide (for linux, the installation process
36- will be slightly different using windows, but the NPM commands are identical).
34+ 如果你不太熟悉这些工具,下面是一个快速入门。(基于linux,在windows上的安装过程会稍稍有点不一样,不过NPM指令是相同的。)
3735 </ p >
3836
39- < h3 > Basic setup </ h3 >
37+ < h3 > 基本设置 </ h3 >
4038 < div >
4139 < ol >
4240 < li >
43- Install [link:https://www.npmjs.org/ npm] and nodejs. The shortest path typically looks something like
41+ 安装 [link:https://www.npmjs.org/ npm]和nodejs。最简单的方式一般像这样
4442 < code >
4543$ sudo apt-get install -y npm nodejs-legacy
46- # fix any problems with SSL in the default registry URL
44+ # 修复默认registry URL中任何SSL的问题
4745$ npm config set registry http://registry.npmjs.org/
4846 </ code >
4947 </ li >
5048
5149 < li >
52- Make a new project directory
50+ 新建一个项目路径
5351 < code >
5452 $ mkdir test-example; cd test-example
5553 </ code >
5654 </ li >
5755
5856 < li >
59- Ask npm to create a new project file for you:
57+ 让npm为你创建一份新的项目文件:
6058 < code >
6159 $ npm init
6260 </ code >
63- and accept all defaults by hitting Enter on all the prompts.
64- This will create package.json.
61+ 在所有出现的提示中敲击回车键来接受默认值。
62+ 这样,一份package.json就建立好了。
6563 </ li > < br />
6664
6765 < li >
68- Try and start the test feature with
66+ 尝试启动测试功能
6967 < code >
7068$ npm test
7169 </ code >
72- This will fail, which is expected.
73- If you look in the package .json, the definition of the test script is
70+ 当然,这一定会失败。
71+ 如果你检查一下package .json, test script的定义是这样的
7472 < code >
7573 "test": "echo \"Error: no test specified\" && exit 1"
7674 </ code >
@@ -79,78 +77,75 @@ <h3>Basic setup</h3>
7977 </ ol >
8078 </ div >
8179
82- < h2 > Add mocha </ h2 >
80+ < h2 > 添加mocha </ h2 >
8381 < div >
84- We're going to use [link:https://mochajs.org/ mocha].
82+ 我们将使用 [link:https://mochajs.org/ mocha]。
8583
8684 < ol >
8785 < li >
88- Install mocha with
86+ 安装mocha
8987 < code >
9088$ npm install mocha --save-dev
9189 </ code >
92- Notice that node_modules/ is created and your dependencies appear in there.
93- Also notice that your package.json has been updated: the property devDependencies
94- is added and updated by the use of --save-dev.
90+ 你会注意到 node_modules/ 被创建了,并且你的依赖都出现在了这里面。
91+ 还有你的package.json被更新了,--save-dev指令向其中加入并更新了devDependencies属性。
9592 </ li > < br />
9693
9794 < li >
98- Edit package.json to use mocha for testing. When test is invoked, we just want to run
99- mocha and specify a verbose reporter. By default this will run anything in test/
100- (not having directory test/ can run into npm ERR!, create it by mkdir test)
95+ 编辑package.json来使用mocha进行测试。当调用测试的时候,我们只想运行mocha并且生成一份详细的报告。
96+ 默认情况下这会运行 test/ 中的任何东西。
97+ (如果项目中没有 test/ 目录的话,会导致npm报错。你可以通过mkdir test来创建这个目录)
10198 < code >
10299 "test": "mocha --reporter list"
103100 </ code >
104101 </ li >
105102
106103 < li >
107- Rerun the test with
104+ 重新运行测试
108105 < code >
109106 $ npm test
110107 </ code >
111108
112- This should now succeed, reporting 0 passing (1ms)
113- or similar.
109+ 现在应该就能成功执行了,生成类似 0 passing (1ms) 的报告。
114110 </ li >
115111
116112 </ ol >
117113 </ div >
118114
119- < h2 > Add three .js</ h2 >
115+ < h2 > 添加three .js</ h2 >
120116 < div >
121117 < ol >
122118 < li >
123- Let's pull in our three.js dependency with
119+ 现在添加我们的three.js依赖
124120 < code >
125121$ npm install three --save-dev
126122 </ code >
127123 < ul >
128124 < li >
129- If you need a different three version, use
125+ 如果你需要three.js的其他版本,使用
130126 < code >
131127 $ npm show three versions
132128 </ code >
133- to see
134- what's available. To tell npm the right one, use
129+ 来确认哪些是可用的。要让npm使用正确的版本,执行
135130 < code >
136131 $ npm install
[email protected] --save
137132 </ code >
138- (0 .84.0 in this example). --save makes this a dependency of this project, rather than
139- dev dependency. See the docs [link: https://www.npmjs.org/doc/json.html here] for more info.
133+ (例子中用的是0 .84.0)。 --save 指令将此加入项目的dependency而不是dev dependency。
134+ 更多信息请参阅 < a href =" https://www.npmjs.org/doc/json.html " > 这份文档 </ a > 。
140135 </ li >
141136 </ ul >
142137 </ li >
143138
144139 < li >
145- Mocha will look for tests in test/, so let's
140+ Mocha会在 test/ 目录中寻找测试文件,所以我们先创建这个目录:
146141 < code >
147142 $ mkdir test
148143 </ code >
149144 </ li >
150145
151146 < li >
152- Finally we actually need a JS test to run. Let's add a simple test that will verify that
153- the three.js object is available and working. Create test/verify -three.js containing:
147+ 最后我们需要一份JS测试文件来运行。我们就添加一段简单的测试程序,这段程序会检验three.js对象是否能正常工作。
148+ 在 test/ 目录下创建verify -three.js包含以下代码:
154149< code >
155150var THREE = require('three');
156151var assert = require("assert");
@@ -169,8 +164,7 @@ <h2>Add three.js</h2>
169164 </ li >
170165
171166 < li >
172- Finally let's test again with $ npm test. This should run the tests above and succeed,
173- showing something like:
167+ 最后再次通过$ npm test来测试。这次应该能正确执行上面的代码,并且返回类似:
174168 < code >
175169The THREE object should have a defined BasicShadowMap constant: 0ms
176170The THREE object should be able to construct a Vector3 with default of x=0: 0ms
@@ -180,33 +174,33 @@ <h2>Add three.js</h2>
180174 </ ol >
181175 </ div >
182176
183- < h2 > Add your own code </ h2 >
177+ < h2 > 加入你自己的代码 </ h2 >
184178 < div >
185- You need to do three things:
179+ 你需要做下面三件事:
186180
187181 < ol >
188182 < li >
189- Write a test for the expected behaviour of your code, and place it under test/.
190- [link: https://github.com/air/encounter/blob/master/test/Physics-test.js Here] is an example from a real project.
183+ 为你的代码写一段测试程序来检验期望结果,并把它放在 test/ 目录下。
184+ < a href =" https://github.com/air/encounter/blob/master/test/Physics-test.js " > 这里 </ a > 有一个实际项目的例子。
191185 </ li >
192186
193187 < li >
194- Export your functional code in such a way that nodejs can see it, for use in conjunction with require.
195- See it [link: https://github.com/air/encounter/blob/master/js/Physics.js here].
188+ 将你的代码以nodejs承认的方式导出,即可以通过require的方式引用。
189+ 参考 < a href =" https://github.com/air/encounter/blob/master/js/Physics.js " > 这份代码 </ a > 。
196190 </ li >
197191
198192 < li >
199- Require your code into the test file, in the same way we did a require ('three') in the example above.
193+ 在测试程序中通过require引入你自己的代码,就像上面例子中我们通过require ('three')来引入一样。
200194 </ li >
201195 </ ol >
202196
203197 < p >
204- Items 2 and 3 will vary depending on how you manage your code. In the example of Physics.js
205- given above, the export part is right at the end. We assign an object to module.exports :
198+ 第2、3条会根据你组织代码的方式而改变。在上面给出的Physics.js的例子中,导出的部分在代码的最末尾。
199+ 我们将module.exports赋值为一个对象 :
206200 </ p >
207201 < code >
208202//=============================================================================
209- // make available in nodejs
203+ // 为了在nodejs中可用
210204//=============================================================================
211205if (typeof exports !== 'undefined')
212206{
@@ -215,38 +209,35 @@ <h2>Add your own code</h2>
215209 </ code >
216210 </ div >
217211
218- < h2 > Dealing with dependencies </ h2 >
212+ < h2 > 处理依赖 </ h2 >
219213 < div >
220214 < p >
221- If you're already using something clever like require.js or browserify, skip this part.
215+ 如果你已经在使用require.js或者browserify之类的便捷工具,就跳过这个部分。
222216 </ p >
223217 < p >
224- Typically a three.js project is going to run in the browser. Module loading is hence done by
225- the browser executing a bunch of script tags. Your individual files don't have to worry
226- about dependencies. In a nodejs context however, there is no index.html binding everything
227- together, so you have to be explicit.
218+ 一般来说,一个three.js项目将在浏览器中运行,浏览器会通过执行一系列script标签来加载模块。
219+ 你自己的文件不用考虑依赖的问题。然而在nodejs环境中,没有一个关联所有文件的index.html,所以你需要显式地加载。
228220 </ p >
229221 < p >
230- If you're exporting a module that depends on other files, you're going to have to tell node to load them.
231- Here is one approach:
222+ 如果你要导出的模块还依赖其他文件,你需要告诉node去加载它们。下面是一种方式:
232223 </ p >
233224 < ol >
234225 < li >
235- At the start of your module, check to see if you're in a nodejs environment.
226+ 在你的模块顶部,检查是否处于nodejs环境中。
236227 </ li >
237228 < li >
238- If so, explicitly declare your dependencies.
229+ 如果是,那就显式地声明你的依赖。
239230 </ li >
240231 < li >
241- If not, you're probably in a browser so you don't need to do anything else.
232+ 如果不是,你多半处于浏览器环境中。这时候你不需要做任何多余操作。
242233 </ li >
243234 </ ol >
244- Example code from Physics.js :
235+ 用Physics.js中的代码举例 :
245236 < code >
246237//=============================================================================
247- // setup for server-side testing
238+ // 服务器端测试配置
248239//=============================================================================
249- if (typeof require === 'function') // test for nodejs environment
240+ if (typeof require === 'function') // 检测nodejs环境
250241{
251242 var THREE = require('three');
252243 var MY3 = require('./MY3.js');
0 commit comments