如何将文本文件导入打字稿？

Question

作为一个最小的示例，我想将文本文件导入打字稿并将其打印到控制台，而不使用

fs

读取它。像这样的东西：

import text from './foo.txt'

console.log(text)

我找到了许多解决方案的示例，例如这个，并且我创建了一个包含以下内容的

typings.d.ts

文件

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

但是当我构建项目时，我仍然看到“错误 TS2307：找不到模块'./foo.txt'。”

我错过了什么？

此处的示例存储库：https://github.com/gferreri/typescript-import-test

Answer 1

[TypeScript][Webpack][CreateReactApp] 将文件导入为文本

不一定是

txt

。它可以是

webpack

尚未处理的任何文件扩展名。

如果您不使用

create react app

，您可以跳过该步骤，但我建议将

webpack

配置修改保存到单独的文件中。

否则，我发现这些步骤中的每一个对于使其正常工作都是必要的。我删除了所有不必要的垃圾。

每个项目只需执行步骤 1-7 一次。

1. [终端]进入你的项目目录：

   cd ./my-app

2. [终端]安装

   raw-loader

   ：

   npm i raw-loader --save-dev

3. [Terminal][CreateReactApp=true] 安装

   react-app-rewired

   ，以便您的自定义配置不在

   node_modules

   中：

   npm i react-app-rewired --save-dev

4. [VS Code][CreateReactApp=true][package.json] 更改

   start

   、

   build

   和

   test

   脚本以使用 React-app-rewired：例如

   "start": "react-app-rewired start"

   。如果您觉得这太激进，请找到您的webpage.config.js 并对其进行修改。但这会带来被吹走的风险。例如，它无法在往返 GitHub 后继续存在。
5. [VS Code] 将

   global.d.ts

   添加到项目

   src

6. [VS Code][CreateReactApp=true] 将

   config-overrides.js

   添加到项目根目录

   my-app

7. [终端]构建：

   yarn build

8. [VS Code] 将文本文件添加到项目中：

   src/mydir/data.txt

9. [VS Code][example.ts]导入文本文件：

   import mytext from './data.txt'

10. [VS Code][example.ts]正常使用文本变量：

    myFunc(mytext)

11. 【终端】运行：

    yarn run

global.d.ts

declare module '*.txt' {}

config-overrides.js

module.exports = function override(config, env) {
  const newRule = {
    test: /\.txt$/i,
    loader: 'raw-loader',
    options: {
      esModule: false,
    },
  }
  config.module.rules.find((r) => r.oneOf).oneOf.unshift(newRule)
  return config
}

数据.txt

hello world

示例.ts

import myText from './data.txt'

var result = myFund(myText)

Answer 2

当前有一个 ESM 项目可以读取类似文本的文件（html / 句柄） - 我已经激活了对 require() 的支持，只是为了加载这些文件。

这对我有用：

import Module from "node:module";

const require = Module.createRequire(import.meta.url);

const templates={
    test: require('./test.handlebars')()
}

console.log('File output: ', templates.test)

！执行示例代码]1

Answer 3

如果文本文件是 graphql 架构，如评论中所述，您可以将 graphql-tag/loader 与 webpack 一起使用。将其与 *.graphql 文件的正确键入相结合：

declare module '*.graphql' {
  import { DocumentNode } from 'graphql';
  const value: DocumentNode;
  export = value;
}

Answer 4

一种解决方案是使用

fs

从磁盘显式读取 if -（如果您不打算使用 Webpack/类似工具捆绑应用程序，这很容易）。

import path from 'path';
import fs from 'fs';

const text = fs.readFileSync(path.join(__dirname, './foo.txt'), 'utf-8');

console.log(text)