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

V2EX = way to explore

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

现在注册

已注册用户请登录

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

想给 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('compA', ['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 配置，看看怎么修改可以去除这种问题。