Nodejs 求助:如何在 leanote desktop app 中正确的导入 mermaid.js
Nodejs 求助:如何在 leanote desktop app 中正确的导入 mermaid.js
想给 leanote desktop-app 添加 mermaid 的支持,研究了一下代码,主要修改 main-v2.js ,但是在引入 https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.1.2/mermaid.js
包的时候,总是出错,找了几个小时,也没有好办法,特此前来请教一下。mermaid.js 是用 webpack 打包后的文件。
目前发现还是包导入的姿势不对,新手请求各位指点一二!跪谢!
require 导入包的配置:
requirejs.config({
waitSeconds: 0,
packages: [
],
paths: {
...
'mermaid': 'public/libs/uml/mermaid'
},
以下是新增的代码:
function renderMermaid() {
var mer = previewContentsElt.querySelectorAll('.prettyprint > .language-mermaid');
if (!mer || mer.length == 0) {
return;
}
console.log(mer);
require(['mermaid'], function (mermaid) {
console.log('xxx');
_.each(mer, function(elt) {
try {
/*
var chart = flowChart.parse(elt.textContent);
var preElt = elt.parentNode;
var containerElt = crel('div', {
class: 'flow-chart'
});
preElt.parentNode.replaceChild(containerElt, preElt);
chart.drawSVG(containerElt, JSON.parse(umlDiagrams.config.flowchartOptions));
*/
console.log(elt)
}
catch(e) {
console.error(e);
}
});
});
}
我自己验证了一下,写了个 math.js ,是可以引入并正确使用的
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
PS, 为啥 desktop-app 的 main-v2.js 包含了很多其他的库,例如 underscore.js 、pretty 等等?感觉导入的包很混乱,整个文件有些大,编辑起来很吃力。
导入后,主要错误是:<br>mermaid.js:50700 Uncaught TypeError: _.constant is not a function<br> at Object.<anonymous> (mermaid.js:50700)<br> at __webpack_require__ (mermaid.js:30)<br> at Object.<anonymous> (mermaid.js:60183)<br> at __webpack_require__ (mermaid.js:30)<br> at Object.<anonymous> (mermaid.js:22998)<br> at __webpack_require__ (mermaid.js:30)<br> at webpackUniversalModuleDefinition (mermaid.js:32880)<br> at Object.<anonymous> (mermaid.js:32887)<br> at __webpack_require__ (mermaid.js:30)<br> at webpackUniversalModuleDefinition (mermaid.js:58497)<br>
这个错误 明显是没有引用 underscore 导致的啊
define(‘compA’, [‘underscore’, ‘mermaid’], function(_, M) {
// _. constant
// M
})
resolve: {
alias: {
_: “underscore/dist/underscore.min”
}
}
<br>new webpack.ProvidePlugin({<br> 'window.jQuery': 'jquery',<br> 'window.$': 'jquery',<br>})<br><br>var $ = require('jquery');<br>window.jQuery = $;<br>window.$ = $;<br>
非常感谢你的回复,我没有用过 webpack,我搞后端的,只是想扩展一下 leanote 的功能,还请多指教!
能否参考 https://github.com/knsv/mermaid,中的 webpack 配置,看看怎么修改可以去除这种问题。
在 Leanote Desktop App 中导入 Mermaid.js 以支持图表和流程图渲染,你可以通过以下步骤来实现。这通常涉及到修改 Leanote 的配置文件或直接在笔记中使用 Mermaid 的语法。以下是一个基本的指导:
-
确保 Leanote 支持 Markdown: Leanote 是基于 Markdown 的,所以首先确保你的 Leanote 版本支持 Markdown 渲染。
-
在笔记中直接使用 Mermaid 语法: 你可以在笔记的 Markdown 编辑器中直接插入 Mermaid 的代码块。例如:
```mermaid graph TD; A-->B; A-->C; B-->D; C-->D;
-
配置 Leanote 以支持 Mermaid: Leanote 默认可能不支持 Mermaid,所以你需要确保你的前端渲染引擎(可能是基于 Markdown-it 或其他)支持 Mermaid 插件。如果 Leanote 提供了插件机制,你可以查找是否有现成的 Mermaid 插件。如果没有,你可能需要手动集成。
-
手动集成 Mermaid.js: 如果 Leanote 没有提供直接的 Mermaid 支持,你可以尝试修改 Leanote 的前端代码。这通常涉及到下载 Mermaid.js 库并在 Leanote 的前端渲染过程中引入它。例如,在 Leanote 的 HTML 模板或 JavaScript 文件中添加以下代码:
<script type="module"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.5.2/dist/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true }); </script>
注意:具体实现可能因 Leanote 的版本和架构而异。