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

Question

我刚刚开始了一个包裹项目，我无法解决路径问题。

这是我的目录结构：

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

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

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

在 index.js 文件中，我使用以下代码连接到 bro.js 和 main.scss：

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

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

bro.js的代码如下：

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

export {bro}

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

兄弟，怎么样

我想解决的是，如果我将 index.js 文件移动到 js 文件夹中，并将 bro.js 文件移动到 js 文件夹内的 lib 文件夹中。

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

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

并且在 index.js 文件中，当它在 js 文件夹中时，更改以下内容以连接到 js 文件夹中的 lib 文件夹中的 bro 和 style 文件夹中的 main.scss：

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


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

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

我的页面

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

我在这里错过了什么？

谢谢

Answer 1

我已经进行了一些研究，并且您拥有的进口产品很好。这是我为模拟您的问题所做的代码。

这里是执行，停止在查询选择器和之后。所以我猜问题是当您使用 querySelector 时 DOM 尚未加载（我在尝试 .textContent 为 null 时遇到错误。

因为您提供了更新的文件夹树，所以导入就很好了。

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

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

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