如何按需加载单独的文件？答案

【问题标题】：How to load separate file on demand?如何按需加载单独的文件？
【发布时间】：2020-04-21 17:07:16
【问题描述】：

我将 Monaco 编辑器用作 JSON 编辑器和模式验证。我知道如何在代码中添加自定义模式验证。遵循官方文档：https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-json-defaults

但我想要的是从外部文件加载架构，因此代码如下所示：

const schema = require('../../../samples/spec-schema.json')

<MonacoEditor height='100%' width='100%'
               language='json'
               theme='vs-dark'
               value={this.state.json}
               onChange={newValue => this.setState(s => Entity(s).set('json', _ => newValue).commit())}
               editorWillMount={monaco => {
                            monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
                                validate: true, 
                                schemas: [{
                                    uri: '../../../samples/spec-schema.json',
                                    schema: schema
                                }]
                            })
                        }}
                    />

我正在将 React 与 Webpack 一起使用，我认为需要一种方法来使用 webpack 加载模式，然后将其传递给 Monaco 编辑器，但我不知道该怎么做。

【问题讨论】：

所以你的问题与 JSON Schema 无关，而是一个通用的“如何动态加载文件”？可能值得重新措辞以获得更多潜在答案。
将文件内容同时提供为schema 变量和其（本地）uri 的动机是什么？那uri不是没必要吗？
@Carsten 似乎是一个合理的编辑，我想我可以通过谷歌搜索如何使用 webpack 导入 JSON 文件来找到解决方案。有时很难朝哪个方向看。 ;)

标签： javascript reactjs webpack monaco-editor

【解决方案1】：

我通过启用 enableSchemaRequest: true 并在 GitHub Gist 中在线托管我的 JSON 模式解决了这个问题。只需将 $schema: "https://gist.githubusercontent.com/my-schema.json" 添加到编辑器顶部，就像在 VS Code 中一样。

monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
     enableSchemaRequest: true
 })

【讨论】：