I think I have some misunderstanding of 'import and export'.

There are many modules, eg: React, react-router-dom, etc...

However, I'd like to talk about the simple project, only html, css and Javascript, without nodeJs/ React.

If I spilt my js file in 5 parts...

Method 1: link js directly

<script src="javascript1.js"></script>
<script src="javascript2.js"></script>
<script src="javascript3.js"></script>
<script src="javascript4.js"></script>
<script src="javascript5.js"></script>

Method 2: Import function from js 2,3,4,5

<script type="module" src="Main.js"></script>
<script src="javascript2.js"></script>
<script src="javascript3.js"></script>
<script src="javascript4.js"></script>
<script src="javascript5.js"></script>

I tried the method 2 and I found it's break.

As there are many global variables in my project...

Finally, it shows error / some variable not found during import the function from other js.

Is there any pros of using 'import and export' for a simple project?

or

just use method 1, link the js file directly.