如何使用Webpack在Monaco中加载npm模块类型定义并做出响应create-react-app

问题描述

出于教程的目的，我想在React应用程序中的摩纳哥中加载一些模块类型定义.

I wanted to load some module type definitions in Monaco inside a react app for tutorial purposes.

实际上，在经历了很多痛苦之后，我还是设法以一种非常笨拙的方式使它工作.所以我不是问怎么做，而是要正确做.

I actually managed to get it working after much pain but in a very hacky way. So I'm not asking how to do it, but rather, how to do it right.

我希望我可以使用Webpack解决的部分是，现在我制作了一个Node.js脚本，该脚本包含了所有可以在私有npm的build文件夹中找到的 .d.ts 文件.模块并将其保存在一个大的.json文件中.

The part I hope I can solve with Webpack is that right now I made a Node.js script that take all the .d.ts file it can find in the build folder of a private npm module and save them inside a large .json file.

以这种格式

{ [filePath]: 'fileContentAsString' }

然后在反应中，我导入该json并为每一个调用 addExtraLib .

Then in react I import that json and call addExtraLib for each one.

for (const filePath in sdkTypesJson) {
  // We add every .d.ts file to Monaco
  monaco.languages.typescript.typescriptDefaults.addExtraLib(
    sdkTypesJson[filePath],
    'file:///' + filePath.replace('dist/src/', '')
  );
}

是否有某种Webpack魔术方法可以避免必须创建json文件?

Is there a way with some webpack magic to avoid having to create the json file?

推荐答案

经过两天的痛苦和痛苦，这是我发现效果最好的方法.

After two days of pain and misery, this is what I found work the best.

const files = require.context('!!raw-loader!./node_modules/my-module-name/dist/src/', true, /\.d.ts$/);

files.keys().forEach((key: string) => {
  // We add every .d.ts file to Monaco
  Monaco.languages.typescript.typescriptDefaults.addExtraLib(
    files(key).default,
    'file:///node_modules/@adsk/fd-modeling-sdk/' + key.substr(2)
  );
});

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

require.context tell Webpack to bundle all file from that path that matches the regex. Here I get all the .d.ts files containing the type description of my module.

!! raw-loader！告诉您加载文件而不尝试执行它.它将使浏览器崩溃.您需要为Webpack安装raw-loader模块.

!!raw-loader! tell to load the file without trying to execute it. It would crash the browser. You need to install the raw-loader module for Webpack.

然后，您可以在嵌入式Monaco实例中拥有这样的代码，并像在vs代码中一样使Intellisense正常工作.

Then you can have code like this in your embedded Monaco instance and have the typing Intellisense working like it would in vs-code.

import {
  function
} from '@my-module-name';

export default async function run(value: string) {
  alert('Code ran. Value passed is ' + value);
};

返回您的应用程序代码，然后可以从摩纳哥获取代码并评估代码.就我而言，当用户在React应用程序中按下运行"按钮时.

Back in your app code, you can then get the code from Monaco and eval the code. In my case when the user press a 'run' button in a react app.

const model = editor.current.getModel();

if (model && sdk.current && editorType === 'text') {
  // Be cool if Monaco worker could transpile the file to js. Don't work for some reason.
  // Monaco.languages.typescript.getTypeScriptWorker()
  //   .then(function(worker) {
  //     worker(model.uri)
  //       .then(function(client) {
  //         client.getEmitOutput(model.uri.toString()).then((output: any) => {
  //           console.log(output);
  //         });
  //       });
  //   });

  // @ts-ignore
  const js = window.ts.transpile(model.getValue());
  const setup = `const exports = { default: null };`;
  const final = setup + ' ' + js;

  try {
    const runMethod = eval(final);
    const newState = await runMethod('My value');
  } catch (error) {
    console.error(error);
    alert(error);
  }
}

从理论上讲，您应该能够要求Monaco打字稿工作人员为您编译文件，但我无法使其正常工作.

In theory, you should be able to ask the Monaco typescript worker to transpile the file for you but I couldn't manage to make it work.

所以我现在用此行将 typescriptServices 加载到我的react index.html文件中.

So I loaded the typescriptServices in my react index.html file with this line for now.

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

这篇关于如何使用Webpack在Monaco中加载npm模块类型定义并做出响应create-react-app的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！