修复有关 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 会处理它们？其中一些是二进制文件，所以我也不能将它们 copy/paste 放入 .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;
}

修复有关 Webpack 加载程序处理的导入的 TypeScript 警告？

Fix TypeScript warning about imports handled by Webpack loaders?

typescript

webpack

webpack-file-loader

svelte

webpack-loader