如何在一个 Webpack“应用程序”中的不同 HTML 模板中使用 Google Material Design (MDC) 组件？

问题描述

我正在做一个我需要学习 Webpack 的项目，所以我仍然是一个初学者，目前正在努力连接点。

以下挑战： 在我的应用程序中，有多个 html 模板 - 用户可以从 index.html 导航到不同的子页面。例如，用户可以通过

从contact.html转到contactform.html

<a href="./contactform.html" id="button-contactform" class="button-secondary">Kontaktformular</a> 

现在我们在不同的模板中使用不同的 mdc 组件 (https://material.io/develop/web/getting-started)。例如，在 index.html 中有一些文本字段可以正常工作，如下例所示：

app.scss：

@use "@material/textfield";

app.js：

import {MDCTextField} from '@material/textfield';

const login-tf = new MDCTextField(document.querySelector('#mdc-login-tf));

现在，当我尝试在 contactform.html 中添加我们需要的 MDC 菜单时，我遇到了问题，我需要尝试以下操作：

contactform.js：

import {MDcmenu} from '@material/menu';

window.onload = function() {

    console.log("openend contact form");
    var menu = MDcmenu(document.querySelector('#testmenu'));
    menu.open = true;
}

但是：在附加的contactform.js 中执行此操作，在导航到contactform.html 时调用它会抛出： 语法错误：意外标记“{”。 import 调用只需要一个参数。

不知何故，只能在 app.js 中导入 @material 组件，在 app.scss 中导入 @use。如果我尝试在 app.js 中初始化菜单，当然 #testmenu 不存在，因为它是“稍后”模板的一部分。

如何将 MDC 组件正确导入不同的模板并在需要时对其进行初始化？感觉就像我错过了一些非常基本的东西。如果需要，我也可以提供我的 webpack 文件。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）