无法在 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 文件 ace-builds

从图片中可以看出，Document 接口放在 Ace 命名空间中，我将总模块导入为 Ace，所以我想我应该使用 new Ace.Ace.Document 新建文档对象，即 defaultImport.Namespace.Interface

文档界面如下。我的 ace-builds 通过 npm 安装 export interface Document extends EventEmitter

ace-builds文件夹结构如下

我的问题：

为什么我的导入不起作用，而且我无法创建文档对象？

我尽力给你一切可以帮助你解决我问题的东西

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

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

Cannot Import Ace Document Object in vue webpack project?

javascript

importerror

ace-editor

webpack

vue.js