решить проблему с путём, 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 в папку lib в папке js.

Я попробовал следующее в html-файле, если index.js находится в папке js:

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

и в файле index.js, когда он находится в папке js, измените следующее для подключения к bro в папке lib, которая находится в папке js, и main.scss, который находится в папке styles:

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


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

Вывод, который я получаю, - это статическое содержимое h3:

Моя страница

Файл main.scss в папке стилей работает, но я не получаю правильный вывод файла bro.js в папке lib.

Что мне здесь не хватает?

Спасибо

Answer 1

Я провел некоторые исследования, и импорт в порядке, как у вас.Вот код, который я сделал, чтобы смоделировать вашу проблему.

А вот и выполнение, остановка в запросе выбора и после него.Так что я предполагаю, что проблема в том, что DOM еще не загружен, когда вы используете querySelector (я получаю ошибку при попытке .textContent of null.

Потому что с обновленным деревом папок вы далиимпорт просто отлично.

И если я удаляю окно. Загрузка это поведение

и код в index.js (единственное, что изменилось):

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