修复关于由 Webpack 加载器处理的导入的 TypeScript 警告？

Question

我正在使用 Svelte、Webpack 和 TypeScript 设置一个新项目。它基于this template，并在初始设置后运行scripts/setupTypeScript.js 脚本以切换到TypeScript。

当尝试导入 非 TypeScript 文件的资源时，VSCode 和 TypeScript 会显示有关它们的错误：

import myContent from './some-file.txt';
// -> Cannot find module './some-file.txt' or its corresponding type declarations.ts(2307)

从技术上讲，这是可行的，但是错误很嘈杂，并且似乎阻止了实时重新加载。有没有办法让 TypeScript 忽略这些导入并相信 Webpack 会处理它们？其中一些是二进制文件，所以我也不能将它们复制/粘贴到.ts 文件中。

Webpack 和 TS 配置如下：

webpack.config.js：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const sveltePreprocess = require('svelte-preprocess');

const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';

module.exports = {
    entry: {
        'build/bundle': ['./src/main.ts']
    },
    resolve: {
        alias: {
            svelte: path.dirname(require.resolve('svelte/package.json'))
        },
        extensions: ['.mjs', '.js', '.ts', '.svelte'],
        mainFields: ['svelte', 'browser', 'module', 'main']
    },
    output: {
        path: path.join(__dirname, '/public'),
        filename: '[name].js',
        chunkFilename: '[name].[id].js'
    },
    module: {
            rules: [
                {
                    test: /\.ts$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.svelte$/,
                    use: {
                        loader: 'svelte-loader',
                        options: {
                            compilerOptions: {
                                dev: !prod
                            },
                            emitCss: prod,
                            hotReload: !prod,
                            preprocess: sveltePreprocess({ sourceMap: !prod })
                        }
                    }
                },
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader'
                    ]
                },
                {
                    test: /\.(txt)$/,
                    use: ['raw-loader']
                },
                {
                    test: /\.(ttf|wasm)$/,
                    use: ['file-loader']
                },
                {
                    // required to prevent errors from Svelte on Webpack 5+
                    test: /node_modules\/svelte\/.*\.mjs$/,
                    resolve: {
                        fullySpecified: false
                    }
                }
        ]
    },
    mode,
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ],
    devtool: prod ? false : 'source-map',
    devServer: {
        hot: true
    }
};

tsconfig.json：

{
        "extends": "@tsconfig/svelte/tsconfig.json",
        "include": ["src/**/*.ts", "src/node_modules/**/*.ts"],
        "exclude": ["node_modules/*", "__sapper__/*", "static/*"]
}

Answer 1

添加具有以下内容的global.d.ts 文件，并确保它被您的include 拾取：

declare module "*.txt";

这告诉 TS“任何以.txt 结尾的导入都可以，将其视为any”。或者，使用另一种类型导出默认值：

declare module "*.txt" {
    const content: string;
    export default content;
}