无法在vue Webpack项目中导入Ace文档对象？

Question

我想在vue和Webpack项目中使用Ace编辑器，我想为每个文件附加一个Ace Document实例，所以我要遵循（默认导入）

import Ace from 'ace-builds'

当我要创建文档时。

let doc = new Ace.Ace.Document('')

但是Chrome开发人员工具总是告诉我

TypeError: Cannot read property Document' of undefined at FileTree.vue:177

和let doc = new Ace.Document('')也不起作用

我有一个导入Ace的js文件，在这里代码工作良好。 editor.js

我的代码（采用vue方法：{}）：

addFile (e) {
  let tree = this.$refs.maintree
  if (this.currentNode === undefined) {
    this.currentNode = tree.getNode(1)
  }
  this.openAddFilePrompt().then(({value}) => {
    let doc = new Ace.Ace.Document('')
    if (this.currentNode.data.detail.type === 'file') {
      let parentNode = this.currentNode.parent
      tree.append({detail: {type: 'file', src: '', document: doc}, id: this.maxId++, label: value}, parentNode)
      return
    }
    this.maxId++
    tree.append({detail: {type: 'file', src: '', document: doc}, id: this.maxId, label: value}, this.currentNode)
  }).catch((err) => {
    console.log(err)
  })
},

---

这是我的d.ts的{​​{1}}文件

从图片中可以看到，Ace名称空间中的Document接口， 我将总模块导入为Ace，所以我认为我应该使用ace-builds（即new Ace.Ace.Document

）新建Document Object

---

文档界面如下。我的defaultImport.Namespace.Interface通过npm安装 ace-builds

---

export interface Document extends EventEmitter文件夹结构如下

我的问题：

为什么我的导入无法正常工作，并且无法创建文档对象？

我试图为您提供一切可以帮助您解决我的问题的

Answer 1

最后，我尝试了许多方法后解决了这个问题。

我不知道为什么无法从名称空间导入export interface。 我在ace.d.ts中发现了require函数，所以我改变了

let doc = new Ace.Ace.Document('')

到

let Document = Ace.require('ace/document').Document

当我需要文档对象时，只需let document = new Document()

有效。

希望这可以帮助其他与我有相同问题的人。

---

我如何解决？

我在ace.js中搜索了exports.Document，发现了ace/document