GLB/GLTF用Storybook加载文件，Webpack用文件加载器加载
我使用Storybook创建了一个组件库，它需要访问.glb/.gltf文件。根据研究，这里最好的做法似乎是使用file-loader Webpack功能，并增强故事书main.js的功能：
// .storybook/main.js
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/preset-create-react-app"
],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.(glb|gltf)$/,
use: ['file-loader'],
include: path.resolve(__dirname, '../'),
});
return config;
},
};然后，在我引用网格的jsx文件中：
// src/components/MeshLoader.jsx
import MyMeshFile from "./meshes/MyMesh.glb";
import { useGLTF } from "@react-three/drei";
export default function Model(props) {
const group = useRef();
const { nodes, materials } = useGLTF(MyMeshFile);
// Do more stuff with these things
}当我运行编译时，一切都正常，如果我记录MyMeshFile是什么，就会得到一个路径，如预期的：static/media/MyMesh.976a5ad2.glb。
但是，其余部分会出现错误Uncaught Unexpected token e in JSON at position 0，这主要是因为useGLTF函数在该文件的内容上失败了。
实际上，http://localhost:6006/static/media/MyMesh.976a5ad2.glb是一个文件，其内容为
export default __webpack_public_path__ + "178cb3da7737741d81a5d4f0c2bcc161.glb";因此，似乎有一些重定向发生了。如果我把浏览器指向http://localhost:6006/178cb3da7737741d81a5d4f0c2bcc161.glb，我就会得到我想要的文件。
我的第一个问题是，考虑到我设置事情的方式，这是否是预期的行为。如果是这样的话，我似乎必须解析Webpack给出的文件路径的内容，并使用它获得实际路径。这似乎有点令人费解，那么是否有更好的方法来处理这个问题呢？
谢谢你的帮助！
更新：
通过将以下内容添加到gltf-webpack-loader文件中，我已经在.storybook/main.js加载程序中进行了测试：
...
config.module.rules.push({
test: /\.(gltf)$/, // Removed gltf from file-loader
use: [{loader: "gltf-webpack-loader"}]
})
...用一个gltf文件做了同样的尝试。我得到了相同的行为，接收“重定向”文件，而不是我想要的实际文件。
回答 1
Stack Overflow用户
发布于 2021-04-16 15:49:16
因此，目前"@storybook/preset-create-react-app"中存在一个导致此问题的bug。删除该附加项似乎解决了这里描述的问题，尽管它确实产生了一个警告：
Storybook support for Create React App is now a separate preset.
WARN To use the new preset, install `@storybook/preset-create-react-app` and add it to the list of `addons` in your `.storybook/main.js` config file.
WARN The built-in preset has been disabled in Storybook 6.0.https://stackoverflow.com/questions/67115610
复制相似问题
腾讯云开发者
