求助：如何在 leanote desktop app 中正确的导入 mermaid.js

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2829 天前的主题，其中的信息可能已经有所发展或是发生改变。

想给 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 等等？感觉导入的包很混乱，整个文件有些大，编辑起来很吃力。

6 条回复 2018-01-16 19:45:55 +08:00

majinjing3

2018-01-16 11:39:41 +08:00

导入后，主要错误是：

```
mermaid.js:50700 Uncaught TypeError: _.constant is not a function
at Object.<anonymous> (mermaid.js:50700)
at __webpack_require__ (mermaid.js:30)
at Object.<anonymous> (mermaid.js:60183)
at __webpack_require__ (mermaid.js:30)
at Object.<anonymous> (mermaid.js:22998)
at __webpack_require__ (mermaid.js:30)
at webpackUniversalModuleDefinition (mermaid.js:32880)
at Object.<anonymous> (mermaid.js:32887)
at __webpack_require__ (mermaid.js:30)
at webpackUniversalModuleDefinition (mermaid.js:58497)
```

image72

2018-01-16 11:46:52 +08:00

这个错误明显是没有引用 underscore 导致的啊
define('copA', ['underscore', 'mermaid'], function(_, M) {
// _. constant
// M
})

majinjing3

2018-01-16 12:25:05 +08:00

@image72 mermaid.js 里面，有 webpack 打包的 lodash，constant 是 lodash 里定义的函数，我猜测是和外部的 underscore 包冲突了

image72

2018-01-16 19:03:46 +08:00

resolve: {
alias: {
_: "underscore/dist/underscore.min"
}
}

image72

2018-01-16 19:05:09 +08:00

```
new webpack.ProvidePlugin({
'window.jQuery': 'jquery',
'window.$': 'jquery',
})

var $ = require('jquery');
window.jQuery = $;
window.$ = $;
```

majinjing3

2018-01-16 19:45:55 +08:00

@image72 非常感谢你的回复，我没有用过 webpack，我搞后端的，只是想扩展一下 leanote 的功能，还请多指教！
能否参考 https://github.com/knsv/mermaid，中的 webpack 配置，看看怎么修改可以去除这种问题。