將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'); 
     //... 
    } 

    //... 
}