Reactjs 如何使用Webpack和react创建应用程序在摩纳哥加载npm模块类型定义

我想在react应用程序中加载一些模块类型定义，以供教程使用

实际上，在经历了很多痛苦之后，我终于成功地让它工作了，但我的工作方式非常艰难。所以我不是问如何做，而是问如何做对

我希望我能用Webpack解决的部分是，现在我制作了一个Node.js脚本，它包含了它可以在私有npm模块的build文件夹中找到的所有

.d.ts

文件，并将它们保存在一个大的.json文件中

以这种格式

{ [filePath]: 'fileContentAsString' }

然后在react中，我导入json并为每个json调用

addExtraLib

for（sdkTypesJson中的常量文件路径）{
//我们将每个.d.ts文件添加到摩纳哥
monaco.languages.typescript.typescriptDefaults.addExtraLib(
sdkTypesJson[filePath]，
'file://'+filePath.replace（'dist/src/'，''）
);
}

---

有没有一种方法可以通过一些网页魔术来避免创建json文件？

经过两天的痛苦和折磨，我发现这是最有效的方法

const files=require.context（“！！raw loader！”/node\u modules/my module name/dist/src/”，true，/\.d.ts$/）；
files.keys（）.forEach（（key:string）=>{
//我们将每个.d.ts文件添加到摩纳哥
Monaco.languages.typescript.typescriptDefaults.addExtraLib(
文件（键）。默认值，
'file:///node_modules/@adsk/fd建模sdk/'+key.substr（2）
);
});

require.context

告诉Webpack绑定该路径中与正则表达式匹配的所有文件。这里我得到了所有包含模块类型描述的

.d.ts

文件

！！原始装载机告诉加载文件而不尝试执行它。这会使浏览器崩溃。您需要为Webpack安装原始加载程序模块

然后，您可以在嵌入的Monaco实例中使用类似的代码，并让Intellisense类型像在vs代码中一样工作

导入{
功能
}来自“@my module name”；
导出默认异步函数运行（值：字符串）{
警报（'代码运行。传递的值为'+Value'）；
};

回到你的应用程序代码中，你可以从摩纳哥获得代码并评估代码。在我的例子中，当用户在react应用程序中按下“运行”按钮时

const model=editor.current.getModel（）；
if（model&&sdk.current&&editorType=='text'）{
//如果Monaco worker可以将文件传输到js，请保持冷静。由于某些原因无法工作。
//Monaco.languages.typescript.getTypeScriptWorker（）
//.then（功能（工人）{
//worker（model.uri）
//.然后（功能（客户端）{
//client.getEmitOutput（model.uri.toString（））。然后（（输出：any）=>{
//控制台日志（输出）；
//         });
//       });
//   });
//@ts忽略
const js=window.ts.transfile（model.getValue（））；
const setup=`const exports={default:null}；`；
const final=setup+''+js；
试一试{
常量运行方法=评估（最终）；
const newState=wait runMethod（“我的值”）；
}捕获（错误）{
控制台错误（error）；
警报（错误）；
}
}

从理论上讲，您应该能够要求Monaco typescript工作人员为您传输文件，但我无法使其正常工作

因此，我现在在react index.html文件中加载了
typescriptServices
，其中包含这一行

<script src="https://unpkg.com/typescript@latest/lib/typescriptServices.js"></script>

在经历了两天的痛苦和痛苦之后，我发现这是我认为最好的工作

const files=require.context（“！！raw loader！”/node\u modules/my module name/dist/src/”，true，/\.d.ts$/）；
files.keys（）.forEach（（key:string）=>{
//我们将每个.d.ts文件添加到摩纳哥
Monaco.languages.typescript.typescriptDefaults.addExtraLib(
文件（键）。默认值，
'file:///node_modules/@adsk/fd建模sdk/'+key.substr（2）
);
});

require.context
告诉Webpack绑定该路径中与正则表达式匹配的所有文件。这里我得到了所有包含模块类型描述的
.d.ts
文件

！！原始装载机告诉加载文件而不尝试执行它。这会使浏览器崩溃。您需要为Webpack安装原始加载程序模块

然后，您可以在嵌入的Monaco实例中使用类似的代码，并让Intellisense类型像在vs代码中一样工作

导入{
功能
}来自“@my module name”；
导出默认异步函数运行（值：字符串）{
警报（'代码运行。传递的值为'+Value'）；
};

回到你的应用程序代码中，你可以从摩纳哥获得代码并评估代码。在我的例子中，当用户在react应用程序中按下“运行”按钮时

const model=editor.current.getModel（）；
if（model&&sdk.current&&editorType=='text'）{
//如果Monaco worker可以将文件传输到js，请保持冷静。由于某些原因无法工作。
//Monaco.languages.typescript.getTypeScriptWorker（）
//.then（功能（工人）{
//worker（model.uri）
//.然后（功能（客户端）{
//client.getEmitOutput（model.uri.toString（））。然后（（输出：any）=>{
//控制台日志（输出）；
//         });
//       });
//   });
//@ts忽略
const js=window.ts.transfile（model.getValue（））；
const setup=`const exports={default:null}；`；
const final=setup+''+js；
试一试{
常量运行方法=评估（最终）；
const newState=wait runMethod（“我的值”）；
}捕获（错误）{
控制台错误（error）；
警报（错误）；
}
}

从理论上讲，您应该能够要求Monaco typescript工作人员为您传输文件，但我无法使其正常工作

因此，我现在在react index.html文件中加载了
typescriptServices
，其中包含这一行

<script src="https://unpkg.com/typescript@latest/lib/typescriptServices.js"></script>


谢谢您的回答！对于一个相关的问题，我将此作为解决方案的基础：。这是我发现我可以使用
addExtraLib
，所以我们绕了一圈：DFun，我今天做了完全相同的事情，但刚刚找到了这个问题。谢谢你的回答！关于一个相关的问题，我