Make a function in a Typescript bundle created with webpack, globally accessible in JS

Question

I'm developing a plugin for a tool. The plugin is just a zip file, and the tool only looks for and loads main.html file. Thefore, any JS must be inlined in the HTML file.

I'm trying to develop with separate Typescript files and then have webpack bundle all the .ts files into a bundle.js and inline it in the HTML.

I managed to this but there's one problem. How to call the logic in the bundle from the HTML?

Webpack creates __webpack_modules__ IIFE variables for the code in the bundle.

<head>
<script>bundled JS</script>
</head>

<body>
</body>

<script>
// How to call here an init() function in the bundle?
</script>

I tried to setup iife: false with no luck:

score 1 · Answer 1 · answered Sep 20 '22 at 16:50

1

You'll need to explicitly export to the global object by assigning to window.

<script>
  (() => {
    function myFn() { console.log('myFn ran') }
    window.myFn = myFn // assign to global object here.
  })()
</script>

<script>
  myFn()
</script>

Then if you want typescript type available for that, see: Create a global variable in TypeScript

answered Sep 20 '22 at 16:50

Alex Wayne

178,991
47
309
337

Thanks but the `window.myFn = myFn` is not run. That's the issue. I think webpack creates and wraps my TS code in a module. – WriteEatSleepRepeat Sep 21 '22 at 13:04
Do you have a very simple repo with an example which shows how to bundle two TS files and expose a global variable or function? – WriteEatSleepRepeat Sep 21 '22 at 13:38

score 1 · Answer 2 · answered Sep 21 '22 at 17:11

It looks like you want to export your bundle as a library that we can use in a different script. If so, the option output#library comes to help so the only thing you need to do is to export it as library with umd format which works great for both node and browser envs.

{
   output: {
    // ...
    library: {
      name: 'yourLib', // you then can access it via window: `window.youLib`
      type: 'umd',
      umdNamedDefine: true,
    },
}

Make a function in a Typescript bundle created with webpack, globally accessible in JS

2 Answers2