Question

你好！

我已经相当一段时间对这个问题进行了一些研究，并且看到其他人可以解决同一问题的不同变体，但是我似乎仍然无法解决我的个人问题。

问题

我正在尝试导出一个外部JavaScript文件，该文件包含侧面导航菜单所需的功能。导航菜单的JavaScript如下

function openSlideMenu() {
document.getElementById('side-menu').style.width = '70vw';
document.getElementById('side-menu').style.opacity = '1';
document.getElementById('overlay').style.opacity = '0.6';
document.getElementById('overlay').style.display = 'unset';
}

function closeSlideMenu() {
document.getElementById('side-menu').style.width = '0';
document.getElementById('side-menu').style.opacity = '0';
document.getElementById('overlay').style.opacity = '0';
document.getElementById('overlay').style.display = 'none';
}

export {
openSlideMenu
}
export {
closeSlideMenu
}

请注意，文件底部的导出来自以前的故障排除尝试，开始时没有。.（不确定是否需要导出）

这是我的源文件夹中的 index.js 文件代码

import './styles/main.scss';
import 'bootstrap';
import 'animate.css';
import { openSlideMenu } from './sidemenu.js';
import { closeSlideMenu } from './sidemenu.js';

这只是给我提供了referenceError，而我在dist js文件中找不到任何功能。（目前，我假设此方法不正确。）

Webpack配置

做完一些研究后，听说有关创建库的信息，我不确定这是否与我的问题有关，但我继续将此代码添加到我的webpack.config.js文件中

   output: {
    filename: 'index.js',
    library: "Nowroom",
    libraryTarget: "umd"
},

看着代码，我认为我实际上并没有改变任何东西，但是我似乎没有找到任何关于捆绑多个JavaScript文件的Webpack输出文档。

解决方法

到目前为止，我发现的唯一解决方法是使用标签将函数本身编码到源index.html中。如果这是我绝对可以使用的唯一方法，但是，如果有实现此目标的更“行业标准”方法，我希望在养成不良习惯之前先学习它。

如果需要任何额外的代码/信息来帮助回答这个问题，我将非常乐意提供！感谢所有阅读此书并能够提供意见的人。

使用Webpack导出多个外部javascript文件-ReferenceError

0 个答案: