javascript - 无法使用 webpack 导入具体化模块

Question

尝试将 materializecss 与 webpack 一起使用。我想要做的是只导入所需的模块而不是所有的 js。加载完整的 js 按预期工作。但是如果我只想使用模态，我不知道该怎么做。我试过了

    import 'materialize-css/js/modal.js';

结果：未捕获的ReferenceError：未定义现金然后我尝试了：

   import 'materialize-css/js/cash.js';
   import 'materialize-css/js/component.js';
   import 'materialize-css/js/global.js';
   import 'materialize-css/js/anime.min.js';
   import 'materialize-css/js/modal.js';

结果：modal.js:24 Uncaught ReferenceError：组件未定义。

我想知道是否有办法通过 webpack 以模块化方式使用 materializecss？

提前谢谢了

Answer 1

这就是我最终做的事情：

import {
    Modal,
    Dropdown
} from 'materialize-css';

document.addEventListener('DOMContentLoaded', function () {
    var modals = M.Modal.init(document.querySelectorAll('.modal'), {});
    var dropdowns = M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'), {});
});

导入您要使用的组件并单独初始化它们。