如何将 monaco yaml 插件与 Monaco Webpack Loader 插件一起使用？

Question

我使用 Webpack Loader 插件安装了 ESM 版本的 Monaco。我想添加 monaco yaml 插件，但我很难理解该怎么做。我正在使用 Integrating the ESM version of the Monaco Editor guide and Monaco Yam plugin README.

yaml 插件的文档说要在 MonacoEnvironment; however, the ESM documentation says to either use Webpack loader, or to set up getWorkerUrl` 函数中设置 getWorker 函数，所以总共有三种不同的设置方法。

getWorker 和 getWorkerUrl 函数的名称暗示它们可以互换——是吗？谁调用这些函数？
getWorkerUrl 使用 ./ts.worker.bundle.js 作为 typescript，而 getWorker 使用 monaco-editor/esm/vs/language/typescript/ts.worker url 创建 typescript worker。这些 url 看起来非常相似。这里是否存在一对一的关系，它是什么？如果有，monaco-editor/esm/vs/language/typescript前缀加在哪里？
Monaco Yaml getWorker 函数源使用 monaco-yaml/yaml.worker url 作为插件。如果getWorkerUrl中的url自动添加了monaco-editor/...前缀，我如何在这个url中使用getWorkerUrl函数？
没有记录 Monaco Webpack 插件的选项，所以我试图从类型中理解它们的含义。有 IFeatureDefinition 和 label、entry、worker 类型 IWorkerDefinition，而 id 和 string。所有这些属性如何与 moduleId 和 label 的 getWorkerUrl 参数相关（这是特征标签还是工人标签？有什么区别？）和 return url 的值?
检查编辑器是否已成功加载 monaco yaml 插件的最简单和最可靠的方法是什么？

总的来说，没有关于所有这些配置的确切契约的适当信息，只有简单的例子，以及所有三种方法之间似乎隐约相似的很多东西（getWorker，getWorkerUrl 和 MonacoWebpackPlugin) 没有任何澄清，所以我对此感到非常困惑。这些问题是我构建所有可用信息的最佳尝试。

Answer 1

我已经添加了答案to the plugin's README file:

您可以扩展插件的配置。扩展你的 webpack.config.js 文件包含以下内容：

import { MonacoWebpackPlugin } from 'monaco-editor-webpack-plugin';

export default {
  // ...the rest of your webpack configuration...
  plugins: [
    new MonacoWebpackPlugin({
      languages: ['yaml'],
      customLanguages: [
        {
          label: 'yaml',
          entry: 'monaco-yaml',
          worker: {
            id: 'monaco-yaml/yamlWorker',
            entry: 'monaco-yaml/yaml.worker',
          },
        },
      ],
    }),
  ],
};

您也可以参考 example 一个完整的项目。

如何将 monaco yaml 插件与 Monaco Webpack Loader 插件一起使用？

How can I use monaco yaml plugin with Monaco Webpack Loader Plugin?

webpack

monaco-editor

es6-modules

webpack-5