3

为了设置 Monaco 编辑器实例，我想为自定义库添加一个类型文件。安装编辑器时，我调用：

    public componentDidMount(): void {
        languages.typescript.javascriptDefaults.addExtraLib(
            typings,
        );
    }

变量typings通过以下方式加载：

// eslint-disable-next-line @typescript-eslint/no-var-requires
const typings = require("../../../modules/scripting/typings/my-runtime.d.ts");

旁注：eslint 注释是必要的，否则会将require调用标记为失败。

我使用 react-app-rewired 允许在不弹出基于 CRA 的应用程序的情况下编辑我的 webpack 配置。现在 config-overrides.js 文件包含：

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

module.exports = function override(config, env) {
    config.plugins.push(new MonacoWebpackPlugin({
        languages: ["typescript", "javascript", "mysql", "json", "markdown"]
    }));

    config.module.rules.push(
        {
            test: /\.(html|d\.ts)$/i,
            use: [
                {
                    loader: 'raw-loader',
                    options: {
                        esModule: false,
                    },
                },
            ],
        },
    );

    return config;
}

如您所见，我实际上在这里处理了 2 种文件类型：html 和 d.ts。html 部分运行良好。加载 .html 文件的 require 调用为我提供了整个 html 文件内容（我需要它来加载<iframe>我的自定义运行时）。

然而，对类型文件的 require 调用返回一个对象（可能是一个模块，很难说，因为它在 vscode 的调试器中显示为空）。

所以问题是：如何更改我的配置以使加载类型文件（.d.ts）作为文本成为可能？

4

1 回答 1

3

你为什么得到{}？我认为因为babel-loader加载器规则（处理*.ts）cra与您的raw-loader规则（处理）冲突，*.d.ts并且 webpack 决定在babel-loader那里使用。

我找到了两种处理这个问题的方法react-app-rewired，请看一下这个repo。

1）raw-loader以更积极的内联方式使用。 

// eslint-disable-next-line import/no-webpack-loader-syntax
const dogTypings = require('!!raw-loader?esModule=false!./dog.d.ts');

说明：!!含义 - 禁用此文件配置中的所有其他规则。import/no-webpack-loader-syntax限制使用内联语法，所以我们需要在那里禁用它。

cra2) 从默认配置中删除 ModuleScopePlugin并在src.
默认情况下，您不能从src. 但是react-app-rewired，当然可以。这是配置示例：

const { resolve } = require('path');
const { removeModuleScopePlugin } = require('customize-cra')

module.exports = function override(config, env) {
    const newConfig = removeModuleScopePlugin()(config, env);

    newConfig.module.rules.push(
        {
            test: /\.(d\.ts)$/i,
            include: resolve(__dirname, 'typings'),
            use: [
                {
                    loader: 'raw-loader',
                    options: {
                        esModule: false,
                    },
                },
            ],
        },
    );

    return newConfig;
}

注意：这两种方式都有一个缺点——它们cra为这些.d.ts文件禁用了 babel 加载器规则（实际上在应用程序中编译打字稿），并且可以为它们的实例破坏类型检查，但我没有检查。您的代码的问题是 typescript 编译器行为，它.d.ts从运行时删除文件，因此 webpack 没有发出它们，我没有找到任何方法来阻止它。

于 2020-05-25T07:52:30.373 回答