1 Тема від vitek Востаннє редагувалося vitek (24.11.2024 16:04:01)

  • vitek
  • Користувач
  • Поза форумом
  • Дата реєстрації: 13.06.2023
  • Повідомлень: 94
    • Репутація: 38

Тема: import/export js, або розбиття js файлу на декілька

Всім привіт,
JavaScript не мій профіль (і взагалі я не в ІТ) так що мої знання відповідні.
Прошу ради/допомоги в наступному питанні.
Хочу розбити свій login.js на 2 файли - винести щось в інший файл, наприклад в dom.js
Вони в одній папці /js
Так виглядить мій dom.js

const dom = {   
    btnProfile : document.querySelector('#btnGetProfile'),
    outProfile : document.querySelector('#myProfile')
};
export default dom;

В свій login.js я зверху добавляв

import dom from "./js/dom.js";

пробував і

import dom from "./dom.js";

але результат один -помилка

Uncaught SyntaxError: import declarations may only appear at top level of a module

Щоб уникнути помилки я закоментував імпорт в файлі і додав його в html

<script src="js/login.js" type="application/javascript" defer>
    import dom from "js/dom.js";</script>
<script src="js/dom.js" type="module" defer></script>

пробував в html і ось так 

import dom from "./js/dom.js";

(типу може я неправильно вказав шлях)
Результат один - варнінг(жовтим) при загрузці сторінки

Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.

і мої імпортовані обєкти невидно.
в login.js тестив -

function testImport() {
    console.log('dom is - ',dom);
    let showMe = dom.btnProfile;
    let callback = showMe.innerHTML = 
            `<h3> I\`m from import file </h3>`;
}

і в консолі метод запускав але його невидно - помилка

Uncaught ReferenceError: dom is not defined

Як правильно розділити файл і застосувати import/export ?
Дякую за відповідь.

2 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 279
    • Репутація: 2722

Re: import/export js, або розбиття js файлу на декілька

import/export можна робити в середовищі для програміста [, або в сервері для node.js]. А для клійента їх (import/export) треба видаляти і перетворяти окремі *.js файли на 1 файл поки вони (*.js файли) в спільному домені. Тільки не намагайтесь обфускувати код, сервер зтискайе HTTP-відповідь окремим алґоритмом (див.Content-Encoding: gzip, deflate).

vitek написав:

Як правильно розділити файл і застосувати import/export ?

Для програміста можна робити importmap

<script type="importmap">
  {
    "imports": {
      "dom": "./js/dom.js",
      "login": "./js/login.js"
    }
  }
</script>

, або звичайний module

<script type="module" src="./js/dom.js"></script>

або

<script type="module">
  /* JavaScript module код */
</script>

, і не 2 в 1-ому

vitek написав:
<script src="js/login.js" type="application/javascript" defer>
    import dom from "js/dom.js";</script>

так не пройде. Треба вибрати: src xor InnerText.

Крім того, не можна import'увати обйекти, які ше не були в export, доводиться export/import'увати послідовно.

Подякували: vitek1

leofun01 вебсайт