Javascript library without using an import in the script tag

Question

I try to create a library using typescript and I would like to use a static method that allows me to render some HTML content that is returned to me by an api rest call based on the parameters I pass to that function now there is a way to create it using a architecture eg pattern repository, compile it and then use it as in the code below (in js format of course)?

<div id="test"></div>

<script scr="../myLybrary.js"></script>
<script type="module">

    MyLibrary.render({
        param: "test",
        param1: "test",
        param2: "test"
    }, "test")

</script>

at the moment to create this situation I have to use an import in the script where the call to the static method resides in this way:

import MyLibrary from './myLybrary.js'

is there any way to avoid this last step?

Thanks to anyone who wants to help me.

T.J. Crowder · Accepted Answer · 2022-01-13 10:46:52Z

2

at the moment to create this situation I have to use an import in the script where the call to the static method resides in this way:
import MyLibrary from './myLybrary.js'

That would generally be the right thing to do. You'd just remove the first script tag, since with it you'll end up loading your library twice. So that leaves us with:

<div id="test"></div>

<!-- Note: No `script` tag for `myLybrary.js` here. -->
<script type="module">
    import MyLibrary from "./myLybrary.js";

    MyLibrary.render({
        param: "test",
        param1: "test",
        param2: "test"
    }, "test");

</script>

Loading a module runs the top-level code in the module, so if myLybrary.js has top-level code that loads some resource, that code will be run when the import declaration is processed.

answered Jan 13, 2022 at 10:46

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Maury8788 Over a year ago

the fact is that the library is made available to users via cdn and it will not be possible to download it from npm for this reason I need to be able to try above all the first and try to remove the second, provided that it is obviously feasible ...

T.J. Crowder Over a year ago

@Maury8788 - There's no reason you can't load a module from a CDN, e.g.: import MyLibrary from "https://some-cdn.net/myLybrary.js";

Maury8788 Over a year ago

wow I did not know this thing I try to test it then, does it fit you as a development method for this type of case or do you have to recommend some other method?

T.J. Crowder Over a year ago

@Maury8788 - For me it's the same as any other time you load code from a CDN. It has the advantage that it's coming from a CDN, which probably has edge locations and so will be very fast; it has the disadvantage that if the CDN is down or inaccessible, your page won't work. The fact it's a module doesn't matter. But separately, I wouldn't expect a library to trigger a side-effect on load (downloading resources from elsewhere). Instead, I'd expect it to offer some kind of initialization method that I'd call to do that. So that part is a bit unusual (to me).

Collectives™ on Stack Overflow

Javascript library without using an import in the script tag

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related