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

Question

我正在尝试构建一个Web组件，它将托管ace编辑器。麻烦的是，我没有找到足够的信息介绍如何导入模块并设置类型。下面的代码使用简单的<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

经过大量挖我设法找到brace模块。这是ace的浏览器封装。幸运的是，它可以直接使用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'); 
     //... 
    } 

    //... 
}