進出口類問題

Question

我想編寫將創建一個 html 節點的類並且一切正常，但是當我將它導入到我正在創建此類對象的文件並將該對象導出到另一個 js 文件時，它不會加載（整個文件我在哪里導入了這個創建的對象）

類文件

    export default class Component {
  constructor(type, className, codeIn) {
    this.codeIn = codeIn;
    this.className = className;
    this.type = type;
  }
  get htmlComponent() {
    return this.codeConv();
  }
  codeConv() {
    const temp = document.createElement(`${this.type}`);

    temp.classList.add(`${this.className}`);

    temp.innerHTML = `${this.codeIn}`;

    return temp;
  }
}

創建對象

import Component from "../../js/core/component";

const docker = {
  article: new Component(
    "article",
    "article",
    '...'),
  ft: new Component("ft", "ft", `<li>Useful commands</li>`),
};

export { docker };

無法加載的文件

import { docker } from "../pages/docker/docker.js";
import Component from "./core/component.js";

document
  .querySelector(".inside")
  .insertBefore(docker.article.htmlComponent, document.querySelector(".ftWr"));

          ...
 

Answer 1

我認為您使用.insertBefore()的方式有問題，我將代碼更改為此，現在它可以正常工作，至少對我而言......

document
  .querySelector(".ftWr").parentNode
  .insertBefore(docker.article.htmlComponent, document.querySelector(".ftWr"));

編輯： Nwm，我嘗試使用 liveServer 而不是通過命令行運行它並遇到導入錯誤。 對我來說，它是通過在腳本標簽中添加type="module"來解決的，如下所示：

<script type="module" src="./index.mjs"></script>

如果您不另行說明，瀏覽器會假定使用常見的 js 導入