我正在努力寻找一个仅从 CDN 运行的最小可运行示例，而不是主要使用本地服务器的现有树内示例。
Cir*_*四事件 20
在谷歌搜索了一下之后，我发现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了一些看起来很古怪的东西，但现在似乎没有它就可以工作了。
使用更少的加载器魔法
灵感来自：如何在没有 node.js 的情况下使用 monaco 编辑器
少加载器.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
在没有装载机的情况下进行
专用问题：如何在没有 node.js 的情况下使用 monaco 编辑器
如果没有丑陋的加载程序，我不知道如何完全做到这一点。
通过查看 Chrome 中的 Network inspector 选项卡，我们看到在打开上述 HTML 时加载了以下内容：
所以我们可以尝试：
无加载器.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 插件来帮助：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，所以问题想必是所有资产的优化问题。
该插件提供了选择功能子集的选项以加快速度并使包更小，我尝试过一些：
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
2023 更新：如果您不需要针对较旧的浏览器，最简单的方法就是直接导入它。您可以使用jsdelivr或skypack。
不需要 webpack 或任何额外的加载逻辑。
<script type="module">
import * as monaco from 'https://cdn.jsdelivr.net/npm/monaco-editor@0.39.0/+esm';
monaco.editor.create(document.querySelector('.monaco'));
</script>
<div class="monaco" style="min-height: 100px"></div>| 归档时间： |
|
| 查看次数： |
2516 次 |
| 最近记录： |