解决路径问题，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 页面上显示以下内容：

How is it going, bro

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

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

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

并在 index.js 文件中，当其位于 js 文件夹中时，更改以下内容以连接到 js 文件夹中的 lib 文件夹中的 bro，以及位于 styles 文件夹中的 main.scss :

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


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

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

My Page

样式文件夹中的 main.scss 可以正常工作，但我无法正确输出 lib 文件夹中的 bro.js 文件。

我在这里错过了什么？

谢谢

Answer 1

我做了一些研究，你有这些导入就可以了。这是我为模拟您的问题所做的代码。

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

时遇到错误

因为有了您提供的更新后的文件夹树，导入就没问题了。

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

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

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

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

resolve path issue, js file not connecting

html

javascript

parceljs