着手看Three.js的源码！

整个项目整体还是特别庞大的，先对外围的内容进行分析，项目结构，组织等方面。

rollup打包

three.js使用rollup打包，算是比较主流的打包方式，当然rollup中有一些特殊的针对constants和glsl文件的打包方式专门的设定，这些需要进一步的了解。

有一个有趣的地方：

  1. output: [
  2.     {
  3.         format: 'esm',
  4.         file: 'build/three.module.js',
  5.         indent: '\t'
  6.     }
  7. ]

在打包的时候，不仅打包为UMD的格式，还打包成了ESM的格式，这是我第一次见到实际的项目这样用，而查看它的example，发现使用如下：

  1. <script type="module">
  2.     import * as THREE from '../build/three.module.js';
  3.     //...
  4. </script>

可以说是，比UMD稍微优雅那么一点点。

另外，本项目在打包压缩的时候，使用了google-closure-compiler，这似乎是一个曾经特别流行的压缩工具，在其它地方也碰到过。而且，经过查一些东西，发现这东西还是很复杂很好用的，也可以配合rollup：https://medium.com/@ajmeyghani/javascript-bundlers-a-comparison-e63f01f2a364。

测试

three.js使用了qunit库来测试，是一个比较远古的库吧，不过其实测试工具大同小异，更重要的还是测试样例的设计。对于测试样例的学习可以放后吧，还是主体功能更重要一点。

除此之外，three.js也使用了Travis这样的CI工具，这也是比较routine的配置了吧。

文件结构

.
├── build
├── docs
├── editor
├── examples
├── files
├── src
├── test
└── utils

大致有这么几个文件夹。

build: 最终文件，包含UMD形式的和ESM形式的

docs: Three的整个官网的文档页面，文档还是非常详细的，值得好好读读

editor: Three的editor，也是很强了，可以当做一个完整的在线3D建模软件使用

examples: 官方的例子，有些例子质量很高

files: 字体logo等等，不太重要

src: 源码文件夹，之后重点研究的内容

test: 测试代码，也需要简单学习

utils: 一些utility的配置，定义等等

类型设置

类型在一个js项目中越来越重要了

Three虽然是JS写的，但是为每个文件必要的API添加了*.d.ts文件，这个添加的方式目前还不是很了解，不知道是手动完成的还是用某种工具自动完成，这个也是自己要学习的地方。

如果是自动的，得学习如何使用其生成想要的类型或者辅助生成类型，如果是手动添加的，需要学习如何为JS库添加必要的类型。

经过实际运行发现，这个应该是自己加的，而且更多的是一种文档性质的，也不是特别的全。
另外，在npm install的时候，才惊奇的发现，three.js没有dependancies，只有devDependencies，很少见了！！