Use javascript inside Django Template

Using Django Templates & Frontend
1

I’m trying to use my custom JavaScript function from separate /frontend/libs/map.ts file inside a Django Template to add different markers in OpenStreetMap dynamically using Leaflet library (items are passed from view).

Pseudo-code:

/frontend/libs/map.ts
---------------------------
function addMarkerToMap(lon,lat) { ..some code.. }


/myapp/templates/myapp/map.html
-----------------------------------------------
{% load static %}
<html><body>...
    <script>addMarkerToMap( {{ item.lon }} , {{ item.lat }} );</script>
...
    <script type="text/javascript" src="{% static 'app.js' %}"></script>
</body></html>

When I try to use my custom function I receive an error in Chrome console:

Uncaught ReferenceError: addMarkerToMap is not defined` error message.

As it’s a bit complex to explain my scenario (TypeScript/webpack etc.) I’ve created the simple example where I can reproduce it: GitHub - Tjdne9/tests: project for testing.

So in the simplified scenario, when I try to use JavaScript function defined in assets/app.js I will get an error instead of JavaScript popping-up alert with text:

"Uncaught ReferenceError: greet is not defined"

All static files works as expected, for example: webpack correctly generated files /app/static/img/django.png and it’s reachable from ‘localhost:8000/static/img/django.png’, same for app.js bundle where it works - changes content of webpack element, see console message and even I can see in bundled app.js definition of my greet function, I just can’t load it in my template).

I can add this function definition in the template itself (fe. index.html) and it will work as expected but the logic for the map will be pretty complex, so I would like to do it on TypeScript side and just reference the index function in index.html but apparently I can’t.

So I just wanted to clarify - Is that even possible? Or I’m wrong already on the concept level and it’s not doable or recommended approach?

EDIT:
I finally found the issue, it was related to bundle file generated by webpack.
First I’ve found that bundle generated additional webpackBootstrap part “/******/ (() => { // webpackBootstrap” which I’ve tested and when I removed this part it worked as I expected.

Later on I’ve found also the option to use Library in webpack output section - that solved my case: Authoring Libraries | webpack