时间戳

首页 > 解决方案 > 找不到模块 '!!raw-loader!./something.glsl' 或其对应的类型声明

typescript - 找不到模块 '!!raw-loader!./something.glsl' 或其对应的类型声明

问题描述

我有一个使用 create-react-app --template typescript 启动的项目。我需要使用 webpack raw-loader 导入一些文件，所以我做了一个npm i -D raw-loader. 现在我像这样导入那些：

// eslint-disable-next-line import/no-webpack-loader-syntax
import fSrc from '!!raw-loader!./something.glsl';

我为 .glsl 文件以及!raw-loader!我的项目添加了声明：

// index.d.ts

declare module '*.svg';
declare module '*.glsl';
declare module '!raw-loader!*';

但是，我得到编译器错误：

Cannot find module '!!raw-loader!./something.glsl' or its corresponding type declarations.  TS2307

    1 | // eslint-disable-next-line import/no-webpack-loader-syntax
  > 2 | import fSrc from '!!raw-loader!./something.glsl';

我在这里做错了什么？

标签： typescriptwebpackcreate-react-appraw-loader

解决方案

根据要求，这就是我所做的对我有用的事情。

在 webpack.config.js 中，使用 raw loader 和glslify-loader来处理任何 .glsl 文件：

module.exports = {
    entry: './src/index.tsx',
    module: {
        rules: [
            {
                test: /\.(glsl|vs|fs|vert|frag)$/,
                exclude: /node_modules/,
                use: ['raw-loader', 'glslify-loader'],
            },
            // ...
        ],
    },
    // ...
};

然后我在没有任何特殊语法的情况下导入它们：

// Where I want to use them:

import fSrc from './fragmentShader.fs.glsl';
import vSrc from './vertexShader.vs.glsl';

如果您使用的是 typescript，则需要在 .d.ts 文件中将这些类型的文件声明为模块：

// index.d.ts

declare module '*.svg';
declare module '*.glsl';
declare module '*.fs.svg';
declare module '*.vs.glsl';

推荐阅读