最近要折腾折腾 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
是无法引入的,因为浏览器不知道引入裸路径。