Javascript JS从另一个文件夹导入语句

我试图学习更多的JS，同时转换一个使用jQuery的旧站点菜单

在当前结构中，menu.js文件位于相对于index.html文件的

js

目录中

这是index.html当前代码的缩写：

<nav>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/menu.js"></script>
<script>
  $(function() {
    menu.init();
  });
</script>

在main.js文件中，我尝试了以下操作：

import 'lib/menu.js';

这不起作用，我想知道是否有可能在index.html文件中包含这一部分

$(function() {
    menu.init();
  }); 

---

改为在main.js文件中完成？

我认为您需要导出希望在menu.js中可见的内容，然后在main.js中导入

menu.js

export { variableName1, variableName2 };
const variableName1 = 'Hey1';
const variableName2 = 'Hey2';

main.js

import { variableName1, variableName2 } from './js/menu.js';

这里有更好的解释：

---

Plunker:

我认为问题在于导入路径

import 'lib/menu.js';

这是一个绝对路径，您的程序将在根目录中查找lib文件夹

<script type="module" src="js/main.js"></script>

您希望使用相对路径。如果main.js文件与lib文件夹位于同一文件夹中，则路径如下所示

import './lib/menu.js'

---

其中“/”表示当前文件夹。如果您需要返回一个级别，“../”将转到父文件夹，依此类推。

您在

menu.js

中导出什么？它是一个jQuery文件，包含菜单ul和li项的单击事件。我想它应该是一个JavaScript文件。您需要按照下面的回答之一正确导出。我确实将其更改为导入“./lib/menu.js”，但index.html文件中的此路径是否与main.js文件正确？我相信html src=“js/main.js”已经是一个相对路径，“/”在那里不是必需的，尽管我不是绝对确定。是的，我会在我的答案中添加一个plunker。谢谢，我会尝试一下，看看它是否适用于我的js文件。但在html文件中，我将引用两个js文件，如下所示：我在plunker项目中尝试了您的建议：但我仍然无法使单击事件生效。我已经更改了与我的项目类似的目录结构