gpt4 book ai didi

typescript - 使用 webpack、threejs 示例和 typescript?

转载 作者:搜寻专家 更新时间:2023-10-30 20:33:26 25 4
gpt4 key购买 nike

我在获取 threejs 示例(如 EffectComposer 或 Detector)中的内容以使用 webpack 和 typescript 时遇到了很多麻烦。

首先,相关的 *.d.ts 文件都存在并通过 tsd 安装。我的问题是让 webpack 实际上包含默认 threejs 构建之外的文件(即 examples/js/ 中的内容)。

从 npm 安装 three 我可以做类似的事情

import THREE = require('three');

它工作正常但缺少上述任何优点。 npm 上还有其他一些捆绑插件的 threejs 包,但我认为它们不适用于 typescript (因为 require('three-js')(['Ef​​fectComposer']) 被 typescript 编译器。

有没有人在这个包中得到了一些东西(比如后处理)来使用 typescript ?

最佳答案

我设法在 webpack.config.js 中找到了一种非常简洁的设置方式。

根据丹的回答:

$ npm install --save-dev imports-loader

事实证明我们实际上并不需要 exports-loader,因为 three.js 示例将它们的构造函数添加到 THREE 对象。

然后,在 webpack.config.js 中,我们可以添加一个规则来添加 var THREE = require('three'); 到导入的模块,如果模块路径解析为包含 three/examples/js 的任何内容:

module: {
rules: [
...
{
test: /three\/examples\/js/,
use: 'imports-loader?THREE=three'
}
]
}

现在,示例模块将在他们期望的时候找到三个全局变量。

然后,为了使导入示例不那么冗长:

resolve: {
alias: {
'three-examples': path.join(__dirname, './node_modules/three/examples/js')
},
...
},

这假设 webpack.config.jsnode_modules 位于同一目录中,相应地进行调整。

现在,我们可以像这样使用示例文件:

import * as THREE from 'three';
import 'three-examples/controls/OrbitControls';

为它的副作用导入模块。

如果你将它与 Typescript 和/或 Babel 一起使用,并且收到有关在 THREE 上找不到示例模块的警告,你可能会发现 this issueimports-loader 存储库中有用以供引用。

关于typescript - 使用 webpack、threejs 示例和 typescript?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35968047/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com