如何使用带有 parcel 的 Web 组件？

Question

我尝试在 parcel 中使用一些网络组件，但它没有按预期方式工作。

首先是我的文件夹结构的截图

这里是 package.json

{
  "name": "parcel-test",
  "version": "1.0.0",
  "description": "",
  "source": "./src/index.html",
  "scripts": {
    "dev": "parcel",
    "build": "parcel build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.8.3",
    "parcel": "^2.8.3"
  },
  "dependencies": {
    "bootstrap": "^5.2.3"
  }
}

index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="./assets/scss/main.scss">
        <title>Parcel-test</title>
    </head>

    <body>

        <header-component></header-component>
        <h1>Hello World!</h1>
        <footer-component></footer-component>
        
    </body>
    <script type="module" src="./assets/js/main.js"></script>
    <script src="./assets/js/header.js" type="text/javascript" defer></script>
    <script src="./assets/js/footer.js" type="text/javascript" defer></script>
</html>

unter.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="./assets/scss/main.scss">
        <title>Parcel-test</title>
    </head>

    <body>

        <header-component></header-component>
        <h1>Hello Unterseite!</h1>
        <footer-component></footer-component>
        
    </body>
    <script type="module" src="./assets/js/main.js"></script>
    <script src="./assets/js/header.js" type="text/javascript" defer></script>
    <script src="./assets/js/footer.js" type="text/javascript" defer></script>
</html>

tha main.css 只是导入 bootstrap

@import "~bootstrap/scss/bootstrap";

以及 main.js

import "bootstrap";

header.js 和 footer.js 非常简单

class Header extends HTMLElement {
    constructor() {
      super();
    }
    connectedCallback() {
      this.innerHTML = `
      <!-- header -->
      <header>
        <h2>Hello, I’m the header!</h2>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="unter.html">Unter</a></li>
        </ul>
      </header>
      `;
    }
  }
  customElements.define('header-component', Header);

class Footer extends HTMLElement {
    constructor() {
      super();
    }
    connectedCallback() {
      this.innerHTML = `
      <footer>
        <h2>Hello, I’m the footer!</h2>
      </footer>
      `;
    }
  }
  customElements.define('footer-component', Footer);

问题是，浏览器获取了错误的 html 代码，我不知道为什么。 unter.html 获得与 index.html 相同的代码。这里有一些带有打开代码检查器的屏幕截图。

页眉和页脚有效，但网站的其余部分无效。这发生在我添加和的那一刻。

我正在使用 Mac OS 13.2.1、VSCode、npm、Parcel、Bootstrap 5.

我真的不知道从哪里开始寻找解决方案。我试图阻止包裹使用缓存中的旧文件

{
  "name": "parcel-test",
  "version": "1.0.0",
  "description": "",
  "source": "./src/index.html",
  "scripts": {
    "dev": "parcel --no-cache",
    "build": "parcel build --no-cache"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.8.3",
    "parcel": "^2.8.3"
  },
  "dependencies": {
    "bootstrap": "^5.2.3"
  }
}

但这并没有改变任何事情。

任何想法都会有帮助:)

如何使用带有 parcel 的 Web 组件？

问题描述投票：0回答：0

最新问题

如何使用带有 parcel 的 Web 组件？

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0