如何在本地运行threejs官方示例

最近要折腾折腾 threejs，从 gihub 上下载了源码，想在本地跑一跑官方示例，方便修改学习看效果。我不是专业前端，也不想去折腾 node，看网上教程和书上都说有个静态文件服务器就能运行了。

这我会啊，刚好我这里有装 python，直接在 threejs 源码根目录运行 python -m http.server ，然后在浏览器输入 localhost:8000，这不就齐活了吗，然鹅。。。

也许以前确实可以，毕竟我看的书还是2019年出版的。但是现在 threejs 源码中使用了 import 和 export 等ES6特性，他们无法直接在浏览器运行，需要 webpack 打包。当然新版浏览器也支持这样的语法了，兼容性可以去网上查看，最新的 Edge 和 Google 应该都没问题。

但是还有一个问题，使用 import 语法后，浏览器对文件的 MIME Type 校验更加严格了，被 import 的文件必须是 text/javascript 或者 application/javascript 类型。否则控制台会报类型错误。

python 的 http 服务不认识 js 文件，于是会给一个默认类型 application/octet-stream 。要解决这个问题我们需要去修改一下 python 的源码，在 python 安装目录下找到 Lib\http 目录，打开其中的 server.py 文件，搜索 extensions_map ，在这个字典中加上 '.js': 'application/javascript' ：

实际确定 MIME 类型的函数是 guess_type，它会根据文件扩展名去查 extensions_map 来获取 MIME 类型。因为 python 是解释执行的，因此我们也不需要编译，修改完之后保存，然后重新执行 python -m http.server 就可以了。

如果是使用 go 语言编写静态文件服务的话，也需要手动指定 js 文件的 MIME 类型，加上下面这行代码即可：

mime.AddExtensionType(".js", "text/javascript; charset=utf-8")

charset=utf-8 不是必须的，但是如果你的 js 文件中有中文，在浏览器打开查看的时候可能会看到乱码。像 gin 这样的框架，静态文件服务底层也是用的 go 原生库，所以也是加上上面的代码就可以了，如果不是用的 go 原生库封装的静态文件服务，就需要去看看对应的文档了。

另外一个要注意的地方是，如果要自己编写 threejs demo，在引入 threejs 库的时候，可以 import build 目录下的 three.module.js ，但是必须用路径引入，而且 script 标签上要加上 type="module" ：

<script type="module">
    import * as THREE from '/build/three.module.js';
    // 浏览器控制台测试，是否引入成功
    console.log(THREE.Scene);
</script>

如果写成 build/three.module.js 是无法引入的，因为浏览器不知道引入裸路径。