将ace代码编辑器导入webpack,es6,typescript项目

Question

我正在尝试构建一个将承载ace编辑器的Web组件.问题是我没有找到有关如何导入模块和设置类型的足够信息.下面的代码使用简单的<script>标签和全局变量工作得很好.

到目前为止,这就是我所拥有的:

npm install ace-code-editor --save
npm install @types/ace --save-dev

代码editor.cmp.ts

// Error: [ts] File '.../node_modules/@types/ace/index.d.ts' is not a module.
import * as ace from 'ace';

export class CodeEditorCmp extends HTMLElement {

    // DOM
    private editor: AceAjax;  // How do I import the type. What type to use?

    constructor() {
        super();
    }

    connectedCallback() {
        this.initCodeEditor();
    }

    initCodeEditor(){

        this.editor = ace.edit("editor-vsc");

        // How do I import the editor themes?
        this.editor.setTheme("ace/theme/xcode"); 

        // How do I import the editor modes?
        var JavaScriptMode = ace.require("ace/mode/html").Mode; 

        this.editor.session.setMode(new JavaScriptMode());
        this.editor.getSession().setTabSize(4);
        this.editor.getSession().setUseSoftTabs(true);
        this.editor.getSession().setUseWrapMode(true);
        this.editor.setAutoScrollEditorIntoView(true);

        // Update document
        this.editor.getSession().on('change', this.onEditorChange);
    }

    onEditorChange(){
    }

}

require('./code-editor.cmp.scss');
window.customElements.define('editor-vsc', CodeEditorCmp);

Answer 1

经过大量挖掘后，我设法找到了支撑模块。它是 ace 的 browserify 包装器。幸运的是，它可以直接与 webpack 一起使用。无需使用单独的类型，它们是预先打包好的。

import * as ace from 'brace';
import 'brace/mode/javascript';
import 'brace/theme/monokai';

export class CodeEditorCmp extends HTMLElement {

    private editor: ace.Editor;

    initCodeEditor(){
        this.editor = ace.edit('javascript-editor');
        this.editor.getSession().setMode('ace/mode/javascript');
        this.editor.setTheme('ace/theme/monokai');
        //...
    }

    //...
}

Answer 2

对于那些不想使用大括号模块的人,我看到我的问题是我导入了错误版本的ace.安装后,请务必从中导入src-noconflict.noconflict版本使用ace.require,它似乎比使用require的其他迭代发挥得更好.

我建议您执行以下操作:

npm install ace-builds --save
npm install @types/ace --save-dev

然后在你的文件中导入noconflict如下:

import * as acemodule from 'ace-builds/src-noconflict/ace';

这将导致ace定义变量.然后,您将能够正常引用ace的方法和属性,例如ace.edit()

您可以获取有关不同版本的ace的更多信息,请查看git页面.