Javascript 解决路径问题，js文件未连接

我刚刚开始一个包裹项目，我在解决路径问题上遇到了麻烦

这是我的目录结构：

root
  |__src
      |__js
      |  |__lib
      |  |   |__bro.js
      |  |_index.js
      |
      |__styles
      |    |_main.scss
      |__index.html
      |__index.js
      |__bro.js

如果在index.js与html文件处于同一级别时将html文件连接到index.js，则在我的html文件中可以使用以下内容：

<script src="index.js"></script>

bro.js的代码如下：

const bro = (greetings) => {
    return `${greetings}, bro`
}

export {bro}

这工作正常，将在html页面上显示以下内容：

怎么样，兄弟

我想解决的是，如果我移动js文件夹中的index.js文件，以及js文件夹中lib文件夹中的bro.js文件

如果index.js在js文件夹中，我在html文件中尝试了以下操作：

<script src="./js/index.js"></script>

我得到的输出是静态h3内容：

我的页面

styles文件夹中的main.scss正在工作，但是我没有在lib文件夹中获得正确的bro.js文件输出

我错过了什么

---

谢谢

我做了一些研究，进口的产品和你们的一样好。这是我用来模拟你的问题的代码

这里是执行，在queryselector中停止，然后停止。所以我猜问题是当您使用querySelector时DOM还没有加载（我在尝试将.textContent设置为null时遇到了一个错误）

因为有了更新后的文件夹树，导入就可以了

如果我删除window.onload，这就是行为

index.js中的代码（唯一改变的东西）是

---

对不起，我把我的图表弄乱了，index.html在src文件夹中，我想把index.js文件移到src文件夹中的js文件夹中，把bro.js文件夹移到js文件夹中的lib文件夹中的js文件夹中的js文件夹中。你能解释一下失败的导入是index.js还是bro.js吗？如果我在html c中使用，我不会收到任何错误ode，然后在index.js中，如果它在js文件夹中，我使用：import{bro}从“./lib/bro”如果bro.js在js文件夹的lib文件夹中，bro.js中的js代码永远不会执行，我只会得到h3标记的静态内容。但是没有生成错误。并且代码：import“../styles/main.scss”能够连接到styles folder中的main.scss文件，这样在尝试查询选择eleme时不会出现错误nt尚未加载到DOM中？我已经做了一个测试，导入工作正常，但等待加载DOM我做了您建议的更改，但我仍然得到静态值：（我创建了一个git repo，如果我可以直接写入您的stackoverflow帐户，我可以将您添加到该repo上吗？

<script src="./js/index.js"></script>

import {bro} from './lib/bro'
import '../styles/main.scss'


document.querySelector('h3').textContent = bro(`How is it going`)

import { bro } from './lib/bro'
document.querySelector('#myid').textContent = bro(`How is it going`)