Symfony 4: Webpack Encore - вызов метода в другом файле JS

Question

Я хочу вызвать в файле index.js метод из app.js.Но я получаю ошибку app.test is not a function.Фрагмент из моего webpack.config.js:

Encore
    .addEntry('app', './assets/js/app.js')
    .addEntry('index', './assets/js/index.js')
    .setOutputPath('public/build/')
    .createSharedEntry('vendor', [
       './assets/js/vendor/jquery-3.2.1.slim.min.js'
    ])
   .autoProvideVariables({
       $: 'jquery',
       jQuery: 'jquery',
       'window.jQuery': 'jquery'
   });

app.js содержит только метод test:

function test() {
    return "test123";
}

и index.js пытается вызвать этот метод:

let app = require("./app");

$(document).ready(function () {
    console.log(app); // empty object {}
    console.log(app.test());
});

Что не так с этой настройкой?Я неправильно понял концепцию веб-пакета?Я думал, что можно потребовать необходимые модули и получить к ним доступ, как в примере выше.

Answer 1

Во-первых, ваши модули связаны, поэтому вы должны использовать только 1 js entry.Удалите вашу app.js запись в webpack.config.js.Затем в вашем app.js экспортируйте свою функцию

function test() {
    return "test123";
}

module.exports = {
    test
};

В свой index.js

let app = require("./app");

$(document).ready(function () {
    app.test()
});

Или альтернативный подход с использованием модулей ESM:

app.js

export function test() {
    return "test123";
}

index.js

import { test } from './app';

$(document).ready(function () {
    test();
});