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

Question

我刚开始处理包裹项目，但无法解决路径问题。

这是我的目录结构：

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

如果我将html文件连接到与html文件处于同一级别的index.js，则可以正常工作，并且在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页面上显示以下内容：

  

最近怎么样，兄弟

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

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

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

以及index.js文件中的js文件夹中的内容更改为以下内容，以连接到js文件夹中的lib文件夹和styles文件夹中的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`)