个人中心
gpt4 book ai didi

monaco-editor - 如何从像 cdnjs 这样的 CDN 运行 Monaco 编辑器？

转载 作者：行者123 更新时间：2023-12-03 16:45:00 34 4
gpt4 key购买 nike

我正在努力寻找一个仅从 CDN 运行的最小可运行示例，而不是主要使用本地服务器的现有树内示例。

最佳答案

谷歌搜索后，我发现 https://jsfiddle.net/developit/bwgkr6uq/它只适用于 unpkg.com，所以我主要是将它改编为 cdnjs，这是一个单独的 HTML 文件:
索引.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Monaco editor</title>
<link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.min.css">
</head>
<body>
<div id="container" style="height:400px;border:1px solid black;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js"></script>
<script>
// require is provided by loader.min.js.
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs' }});
require(["vs/editor/editor.main"], () => {
  monaco.editor.create(document.getElementById('container'), {
    value: `function x() {
  console.log("Hello world!");
}`,
    language: 'javascript',
    theme: 'vs-dark',
  });
});
</script>
</body>
</html>
直播: http://cirosantilli.com/web-cheat/monaco-editor.html
https://jsfiddle.net/developit/bwgkr6uq也在设置 window.MonacoEnvironment一些看起来很古怪的东西，但现在没有它似乎可以工作。
使用更少的加载器魔法
灵感来自: how to use monaco editor without node.js
少加载器.html 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Monaco editor no loader</title>
<link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/editor/editor.main.min.css">
</head>
<body>
<div id="container" style="height:400px;border:1px solid black;"></div>
<script>var require = { paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs' } }</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/editor/editor.main.nls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/editor/editor.main.js"></script>
<script>
monaco.editor.create(document.getElementById('container'), {
  value: `function x() {
  console.log("Hello world!");
}`,
  language: 'javascript',
  theme: 'vs-dark',
});
</script>
</body>
</html>
直播: http://cirosantilli.com/web-cheat/monaco-editor-no-loader.html
在没有装载机的情况下进行
专用问题: how to use monaco editor without node.js
如果没有丑陋的加载程序，我不知道如何完全做到这一点。
通过查看 Chrome 中的 Network inspector 选项卡，我们看到在打开上述 HTML 时加载了以下内容:
  • https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/loader.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.js
  • https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.nls.js
  • https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/language/typescript/tsMode.js
  • https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/basic-languages/javascript/javascript.js

    • 所以我们可以尝试:
    无加载器.html 
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Monaco editor no loader TODO</title>
        <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.min.css">
    </head>
    <body>
    <div id="container" style="height:400px;border:1px solid black;"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.nls.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/language/typescript/tsMode.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/basic-languages/javascript/javascript.js"></script>
    <script>
    let editor = monaco.editor.create(document.getElementById('container'), {
        value: `function x() {
      console.log("Hello world!");
    }`,
        language: 'javascript',
        theme: 'vs-dark',
    });
    </script>
    </body>
    </html>
    但这失败了，因为所有 .js 文件都依赖于全局 define(函数存在，它是在加载器中定义的。
    如果我们将加载器添加回上面，编辑器似乎可以工作，但是 JavaScript 控制台上会显示一堆错误，因为其中一些文件似乎正在尝试动态加载本地文件系统中的其他文件。
    Webpack 集成
    对于任何严重的事情，这将是要走的路。
    由于他们的库分发是如此复杂，他们有这个 Webpack 插件来帮助: https://github.com/microsoft/monaco-editor-webpack-plugin
    似乎工作正常的最小示例，请注意从 file:// 运行时出现 JavaScript 错误“EditorSimpleWorker.loadForeignModule 的意外使用”。 : https://github.com/microsoft/monaco-editor-webpack-plugin/issues/157所以大概加载器仍然用于动态资源。构建和查看: 
    npm install
    npm run build
    python3 -m http.server
    然后访问 http://localhost:8080
    包.json 
    {
      "name": "monaco-editor-webpack-plugin-demo",
      "version": "1.0.0",
      "private": true,
      "dependencies": {
        "css-loader": "5.2.4",
        "file-loader": "^6.2.0",
        "monaco-editor": "0.26.1",
        "monaco-editor-webpack-plugin": "4.1.1",
        "style-loader": "2.0.0",
        "webpack": "5.36.1",
        "webpack-cli": "4.6.0"
      },
      "scripts": {
        "build": "webpack",
        "start": "webpack serve --open --config webpack.config.js"
      }
    }
    索引.js 
    import * as monaco from 'monaco-editor'
    // or import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
    // if shipping only a subset of the features & languages is desired

    monaco.editor.create(document.getElementById('container'), {
      value: `function x() {
      console.log("Hello world!");
    }`,
      language: 'javascript',
      theme: 'vs-dark',
    });
    索引.html 
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Monaco editor webpack plugin</title>
    </head>
    <body>
    <div id="container" style="height:400px;border:1px solid black;"></div>
    <script src="dist/index.js"></script>
    </body>
    </html>
    这个例子也可以从他们的上游测试中提取出来: https://github.com/microsoft/monaco-editor-webpack-plugin/tree/2459e4a023f9026ae5796a6e92f584c5d38e583e/test该测试使用 package.json然而，从包本身，你必须提取一些 devDependencies从他们变成你自己 package.json ，因为它们不是真正的 devDependencies .完整运行: 
    git clone https://github.com/microsoft/monaco-editor-webpack-plugin
    cd monaco-editor-webpack-plugin
    npm install
    npm run prepublishOnly
    npm test
    chromium test/dist/index.html
    一个 mode: 'production'构建速度非常慢，在我的联想 P51 上大约需要 50 秒。 'development'快很多，只有5s，所以问题想必是所有 Assets 的优化问题。
    该插件提供了选择功能子集的选项以加快速度并使包更小，我尝试过一些: 
  • new MonacoWebpackPlugin({
      languages: ['javascript', 'typescript'],
    })
    可能会节省几秒钟，不是很明显。如文档中所述，typescript使用 javascript 时是强制性的.
  • languages: [], : 22s
  • languages: [], features: [], : 也是 22 秒，features: []没有区别

    • 让它与 Next.js 一起工作
    就在我以为战斗结束的时候……但没有!上面的 webpack 设置不适用于 Next.js 11，失败了: Monaco editor with nextjs但我设法解决了使用: https://github.com/suren-atoyan/monaco-react

    关于monaco-editor - 如何从像 cdnjs 这样的 CDN 运行 Monaco 编辑器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63179813/

    34 4 0
    文章推荐： azure - 使用 Azure.Security.KeyVault.Secrets 的 Net core Key Vault 配置
    文章推荐： database - 如何解决Postgresql SCRAM身份验证问题？
    文章推荐： visual-studio-code - Visual Studio(VS代码)代码终端无法启动
    文章推荐： objective-c - AVAssetImageGenerator复制CGImageAtTime :actualTime:error: generates 8-bit images from 10-bit video
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com