4

我试图import通过将它们作为字符串包含一些 WebGL 顶点和片段着色器。

我有一个这样的项目结构：

myproj/
  src/
    shad/
      foo.frg
      foo.vtx
    shad.d.ts
    Foo.ts
  dist/
    ...
  built/
    ...
  tsconfig.json
  package.json
  webpack.config.js

shad.d.ts

declare module '*.vtx' {
    const content: string;
    export default content;
}

declare module '*.frg' {
    const content: string;
    export default content;
}

脚

import stuff from 'shad/foo.frg'

console.log(stuff)

tsconfig.json

{
    "include": [
        "src/**/*", 
        "src/shad/**/*.vtx", 
        "src/shad/**/*.frg",
    ], 
    "exclude": ["node_modules"],
    "compilerOptions": {
        "target": "ES2018",
        "module": "es2015",
        "declaration": true,
        "sourceMap": true,
        "outDir": "built",
        "composite": true,
        "strict": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true
    }
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: {
    test: './src/Foo.ts',
  },
  mode:    'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  },
  module: {
    rules: [
      {
        test:    /\.tsx?$/,
        use:     'ts-loader',
        exclude: [
          /node_modules/,
        ]
      },
      {
        test: /\.(vtx|frg)$/i,
        use:  'raw-loader',
      },
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js', '.vtx', '.frg' ],
  },
  output: {
    filename: '[name].bundle.js',
    path:      path.resolve(__dirname, 'dist'),
  },
};

当我npx webpack，我得到：

ERROR in ./src/Foo.ts
Module not found: Error: Can't resolve 'shad/foo.frg' in '/Users/tbabb/test/tmp/tsproj/src'
 @ ./src/Foo.ts 1:0-33 4:16-21

此外，src/shad/目录中不存在该文件夹及其内容built/。

我一直在 TypeScript 和 Webpack 的所有文档中四处游荡，以及这里的许多其他答案。从我读过的大部分内容来看，它的存在和内容shad.d.ts应该足以解决这个问题，但它并没有——我什至不知道如何找出原因。

这是怎么回事？使用 TypeScript 在 Webpack 中导入原始文件需要做什么？（或者至少，我能做些什么来弄清楚为什么没有找到这个？）

4

3 回答 3

2

在我使用 Next.js（也是 Typescript）的情况下，我通过安装 raw-loader 解决了这个问题。真的。

npm install raw-loader

事实证明，我的 Next.js 项目没有附带 raw-loader。我是一个新手，所以我认为它是我的项目附带的。

因此，对于遇到相同问题的其他人，请在尝试其他解决方案之前检查您的 package.json 文件以查看 raw-loader 是否存在。

raw-loader 依赖

于 2021-06-18T07:06:23.313 回答
0

在这个特殊的重现案例中，我不小心从导入中省略了“./” Foo.ts。它应该是：

import stuff from './shad/foo.frg'

提示这个问题的实际问题我已经缩小到一个明显的错误，在raw-loader.

于 2020-05-31T06:45:35.670 回答
0

将文件shad.d.ts重命名为global.d.ts并移至源目录的根目录（紧邻index.ts）。这让打字稿编译器为我挑选它。

于 2021-09-17T04:55:47.837 回答