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

Posted 2021-05-07

我刚刚开始使用parcel projekt，我无法解决路径问题。

这是我的目录结构：

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页面上显示：

怎么样，兄弟

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

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

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

并在index.js文件中，当它在js文件夹中更改以下内容以连接到js文件夹中的lib文件夹中的bro，以及样式文件夹中的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文件输出。

我在这里失踪了什么？

谢谢

答案

我已经做了一些研究，并且进口很好，因为你有它们。这是我为模拟你的问题所做的代码。

这里是执行，在queryselector中停止并在它之后。所以我猜测问题是当你使用querySelector时，DOM还没有被加载（我收到了尝试.textContent为null的错误。

因为你已经给出了更新的文件夹树，所以导入就可以了。

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

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

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