如何在Webpack+React环境中以文本形式加载typings文件？

看起来你的问题出在Webpack规则的优先级上：Create React App默认的TypeScript loader会先处理.d.ts文件，把它们当作类型定义模块解析，而不是让raw-loader以纯文本形式加载。这就是为什么你用require加载.d.ts时得到的是一个空对象，而.html文件能正常返回文本的原因。

下面是具体的修复方案：

步骤1：修改Webpack配置，排除目标.d.ts文件被TypeScript loader处理 #

在config-overrides.js中，我们需要先找到CRA内置的TypeScript规则，然后将你的自定义typings目录排除在外，这样Webpack就不会用TypeScript loader处理这些文件了。

步骤2：为目标.d.ts文件单独配置raw-loader #

同时，我们要明确指定raw-loader只处理你指定目录下的.d.ts文件，避免影响其他正常的类型定义文件。

修改后的config-overrides.js代码如下：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function override(config, env) {
  // 找到CRA内置的TypeScript处理规则
  const tsRule = config.module.rules.find(rule => 
    rule.test?.test('.ts') || rule.test?.test('.tsx')
  );

  if (tsRule) {
    // 将自定义typings目录添加到排除列表，避免被TypeScript loader处理
    tsRule.exclude = [...(tsRule.exclude || []), /modules\/scripting\/typings/];
  }

  // 配置Monaco Editor插件
  config.plugins.push(new MonacoWebpackPlugin({
    languages: ["typescript", "javascript", "mysql", "json", "markdown"]
  }));

  // 为自定义.d.ts文件配置raw-loader
  config.module.rules.push(
    {
      test: /\.d\.ts$/i,
      include: /modules\/scripting\/typings/, // 仅匹配你的typings目录下的d.ts文件
      use: [
        {
          loader: 'raw-loader',
          options: {
            esModule: false, // 确保返回纯文本而非ES模块对象
          },
        },
      ],
    },
    // 保留原有的html文件处理规则
    {
      test: /\.html$/i,
      use: [
        {
          loader: 'raw-loader',
          options: {
            esModule: false,
          },
        },
      ],
    },
  );

  return config;
}

为什么这样能解决问题？ #

1. 排除TypeScript loader的处理：通过修改TypeScript规则的exclude属性，我们告诉Webpack不要把你的自定义typings目录下的.d.ts当作类型模块解析，而是留给raw-loader处理。
2. 精准匹配raw-loader规则：用include指定具体的typings目录，确保只有这些文件会被raw-loader加载为纯文本，不会影响项目中其他正常的.d.ts类型定义文件。
3. 确保esModule: false：这个选项保证require调用直接返回文件的文本内容，而不是包含default属性的模块对象。

完成配置修改后，重启你的开发服务器，再调用require("../../../modules/scripting/typings/my-runtime.d.ts")就应该能得到.d.ts文件的纯文本内容，然后正常传递给languages.typescript.javascriptDefaults.addExtraLib()了。

内容的提问来源于stack exchange，提问作者Mike Lischke