Выявление шаблона модуля и веб-пакета

Question

У меня есть такой пример модуля в module1.js файле:

export const Module1 = (function() {

    'use strict';

    function init()
    {
        console.log('init');
    }

    return {
        init: init
    };

}());

в bootstrap.js файле, который у меня есть:

require('./module1');

и в app.js Я использую:

require('./boostrap');

$(function() {
    Module1.init();
});

но я получаю:

Uncaught ReferenceError: Module1 не определен

То же самое, когда я пытаюсь запустить только:

Module1.init();

in bootstrap.js

На всякий случай - я не парень из JavaScript, поэтому, пожалуйста, объясните мне шаг за шагом, что здесь не так, если нужно причудливое решение.Я использую Laravel mix под капотом для веб-пакета, я не использую никакой пользовательской конфигурации для веб-пакета.

Answer 1

Я пробовал разные сценарии, и кажется, что решение делало это так:

const Module1 = (function() {

    'use strict';

    function init()
    {
        console.log('init');
    }

    return {
        init: init
    };

}());

export default Module1;

А затем в bootstrap.js включали это так:

import Module1 from './module1';

и в bootstrap.js Я могу запустить:

Module1.init();

Однако это не заставляет Module1.init() работать в app.js, поэтому я окончательно удалил этот импорт из boostrap.js, и теперь мой app.js выглядит следующим образом:

require('./boostrap');
import Module1 from './module1';

$(function() {
    Module1.init();
});

Answer 2

require в Javascript не работает, как некоторые другие языки.Он не импортирует код, но модуль.

Давайте возьмем 3 ваших модуля: Module1, Bootstrap и App.

Для Bootstrap требуется Module1, который работает, так как вы экспортировали модуль в файле module1.js:

export const Module1 = [...]

Однако файл bootstrap.js экспортирует только модуль Bootstrap.Он не экспортирует Module1.

Вам необходимо импортировать Module1 в app.js, чтобы использовать его.