0

我正在做一个我需要学习 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 中有一些可以正常工作的文本字段，如下例所示：

应用程序.scss：

@use "@material/textfield";

应用程序.js：

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

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

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

联系表格.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 时调用它会抛出： SyntaxError: Unexpected token '{'。import call 只需要一个参数。

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

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

4

0 回答 0