将自定义ace编辑器模式导入brace时,requires调用找不到helper模块

ymdaylpp  于 2021-07-15  发布在  ClickHouse
关注(0)|答案(0)|浏览(315)

我曾尝试使用brace(ace编辑器的browserify兼容版本)实现ace编辑器lib的自定义模式。
我有这个ace模块,在没有支架的其他项目上运行良好。当这段代码使用require函数导入modules/ext时,inners requires被破坏,即使我将文件放在正确的文件夹中。
我尝试在哪里放置文件,然后导入
尝试1:节点模块文件夹: node_module/brace/mode/[files here] 尝试2:应用程序文件夹: src/ace/[files here] 错误如下:

mode-clickhouse.js?51d8:14 Uncaught TypeError: Cannot read property 'ClickhouseHighlightRules' of undefined

需要导入后找不到导入模块。ace模式来自于tabix.io项目,是clickhouse的gui
自定义模式ace:link的路径
自定义模式子模块的路径:链接
下面是我如何导入这个自定义ace模式。我在这里使用vue,但我确信vue不是问题生成器。

<script lang="ts">
    import { Component, Vue, Watch } from 'vue-property-decorator';
    import * as brace from 'brace';
    // const ace = brace

    // OBS.: this one does not work
    // require('./ace/clickhouse_highlight_rule');
    // require('./ace/mode-clickhouse');

    // OBS.: this one does not work too
    import 'brace/mode/mode-clickhouse';

// ... more code
</script>

下面是被破坏的部分代码

ace.define("ace/mode/clickhouse", ["require", "exports", "module", "ace/lib/oop", "ace/mode/text",
    "ace/token_iterator",
    "ace/mode/folding",
    "ace/mode/clickhouse_FoldMode",
    "ace/mode/clickhouse_highlight_rules"

], function (require, exports) {
    "use strict";

    let oop = require("../lib/oop");
    let TextMode = require("./text").Mode;

// OBS.: ---> ERROR HERE
    let ClickhouseHighlightRules = require("./clickhouse_highlight_rules").ClickhouseHighlightRules;
    let ClickhouseFoldMode = require("./clickhouse_FoldMode").FoldMode;
    let MatchingBraceOutdent = require("./matching_brace_outdent").MatchingBraceOutdent;
    let CstyleBehaviour = require("./behaviour/cstyle").CstyleBehaviour;

    let Mode = function () {

        this.foldingRules = new ClickhouseFoldMode();
        this.$outdent = new MatchingBraceOutdent();
        this.$behaviour = new CstyleBehaviour();
        this.HighlightRules = ClickhouseHighlightRules;
    };

// more code here

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题