V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
majinjing3
V2EX  ›  Node.js

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

  •  
  •   majinjing3 · 2018-01-16 11:05:46 +08:00 · 4184 次点击
    这是一个创建于 2504 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想给 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
        1
    majinjing3  
    OP
       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
        2
    image72  
       2018-01-16 11:46:52 +08:00   ❤️ 1
    这个错误 明显是没有引用 underscore 导致的啊
    define('compA', ['underscore', 'mermaid'], function(_, M) {
    // _. constant
    // M
    })
    majinjing3
        3
    majinjing3  
    OP
       2018-01-16 12:25:05 +08:00
    @image72 mermaid.js 里面,有 webpack 打包的 lodash,constant 是 lodash 里定义的函数,我猜测是和外部的 underscore 包冲突了
    image72
        4
    image72  
       2018-01-16 19:03:46 +08:00   ❤️ 1
    resolve: {
    alias: {
    _: "underscore/dist/underscore.min"
    }
    }
    image72
        5
    image72  
       2018-01-16 19:05:09 +08:00   ❤️ 1
    ```
    new webpack.ProvidePlugin({
    'window.jQuery': 'jquery',
    'window.$': 'jquery',
    })

    var $ = require('jquery');
    window.jQuery = $;
    window.$ = $;
    ```
    majinjing3
        6
    majinjing3  
    OP
       2018-01-16 19:45:55 +08:00
    @image72 非常感谢你的回复,我没有用过 webpack,我搞后端的,只是想扩展一下 leanote 的功能,还请多指教!
    能否参考 https://github.com/knsv/mermaid,中的 webpack 配置,看看怎么修改可以去除这种问题。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2897 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 09:02 · PVG 17:02 · LAX 01:02 · JFK 04:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.