来自另一个文件夹的 JS 导入语句

Question

I am trying to learn more JS and at the same time convert a older sites menu that is using jQuery for the menu.

In the current structure the menu.js file is in js directory relative to the index.html file.

This is an abbreviation of the current code of 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>

What I want is to have a main.js file in the js directory and then use a import statement to import the menu.js file which is located in a lib directory within the js directory.

What I changed in the index.html file is that it now points to the main.js file instead in the js directory.

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

In the main.js file I tried the following:

import 'lib/menu.js';

This didn't work out, and I wonder also if its possible to have this part in the index.html file, the

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

done in the main.js file instead?

Answer 1

I think you need export what you want be visible inside menu.js, and import inside main.js.

menu.js

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

main.js

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

Better explanation here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

Plunker: https://plnkr.co/edit/FfMbHbyhyppUSpKC?preview

Answer 2

I believe the problem is with the import path

import 'lib/menu.js';

This is an absolute path, and your program will be looking for a lib folder in your root directory.

You want to use a relative path. If your main.js file is in the same folder as the lib folder, the path would look like

import './lib/menu.js'

where './' represents the current folder. If you needed to go back one level, '../' will go to the parent folder, and so on.