我有兴趣使用 Monaco编辑在Vue.js支持Electron项目。
到目前为止:
Microsoft 提供了一个 Electron Sample (我已经运行并正常工作)
有多种vue.js npm repos对于 monaco - 然而它们中没有一个似乎开箱即用地完全支持 Electron。
看起来最有希望的是 vue-monaco但我遇到了正确整合它的问题。
AMD 要求？
这是 Microsoft 示例中用于 Electron 的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Monaco Editor!</title>
</head>
<body>
<h1>Monaco Editor in Electron!</h1>
<div id="container" style="width:500px;height:300px;border:1px solid #ccc"></div>
</body>
<script>
// Monaco uses a custom amd loader that overrides node's require.
// Keep a reference to node's require so we can restore it after executing the amd loader file.
var nodeRequire = global.require;
</script>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
// Save Monaco's amd require and restore Node's require
var amdRequire = global.require;
global.require = nodeRequire;
</script>
<script>
// require node modules before loader.js comes in
var path = require('path');
function uriFromPath(_path) {
var pathName = path.resolve(_path).replace(/\\/g, '/');
if (pathName.length > 0 && pathName.charAt(0) !== '/') {
pathName = '/' + pathName;
}
return encodeURI('file://' + pathName);
}
amdRequire.config({
baseUrl: uriFromPath(path.join(__dirname, '../node_modules/monaco-editor/min'))
});
// workaround monaco-css not understanding the environment
self.module = undefined;
// workaround monaco-typescript not understanding the environment
self.process.browser = true;
amdRequire(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
});
</script>
</html>
我正在使用的模块允许这样的事情:
<template>
<monaco-editor :require="amdRequire" />
</template>
<script>
export default {
methods: {
amdRequire: window.amdRequire
// Or put this in `data`, doesn't really matter I guess
}
}
</script>
我似乎无法弄清楚如何获得在 Electon + vue 中定义的正确 amdRequire 变量。我相信如果我能克服这一点，其他一切都会变得简单。
Electron 常见问题解答提到了一些关于此的内容(我认为):I can not sue jQuery/RequireJS/Meteor/AngularJS in Electron
示例代码
我在 GitHub 上放了一个示例项目 https://github.com/jeeftor/Vue-Monaco-Electron “有问题的”组件在 ./src/renderer/components/Monaco.vue 中
总结
如何让这个 Monaco Editor 正确加载到将在 electron 中运行的 Vue.js 组件中？
感谢您提供的任何帮助。
最佳答案
我做的几乎一样，只是没有额外的 vue-monaco 组件。经过一番努力，我可以解决问题:
function loadMonacoEditor () {
const nodeRequire = global.require
const loaderScript = document.createElement('script')
loaderScript.onload = () => {
const amdRequire = global.require
global.require = nodeRequire
var path = require('path')
function uriFromPath (_path) {
var pathName = path.resolve(_path).replace(/\\/g, '/')
if (pathName.length > 0 && pathName.charAt(0) !== '/') {
pathName = '/' + pathName
}
return encodeURI('file://' + pathName)
}
amdRequire.config({
baseUrl: uriFromPath(path.join(__dirname, '../../../node_modules/monaco-editor/min'))
})
// workaround monaco-css not understanding the environment
self.module = undefined
// workaround monaco-typescript not understanding the environment
self.process.browser = true
amdRequire(['vs/editor/editor.main'], function () {
this.monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
})
})
}
loaderScript.setAttribute('src', '../node_modules/monaco-editor/min/vs/loader.js')
document.body.appendChild(loaderScript)
}
我刚刚拿了 electron-amd 样本并稍微调整了一下。我在组件的创建函数中调用了 loadMonacoEditor 函数。
为了不获取 Not allowed to load local resource: file:///C:/.../node_modules/monaco-editor/min/vs/editor/editor.main.css问题，你还得设置
webPreferences: {
webSecurity: false
}
在您的 BrowserWindow 实例中。
关于javascript - 让 Monaco 与 Vuejs 和 Electron 一起工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49774331/