CODEWITHSUNDEEP
javascripttypescriptwebpack
WriteEatSleepRepeat
WriteEatSleepRepeat

Reputation: 3143

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

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:

enter image description here

Upvotes: 1

Views: 377

Answers (2)

tmhao2005
tmhao2005

Reputation: 17524

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,
    },
}

Upvotes: 1

Alex Wayne
Alex Wayne

Reputation: 187272

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

Upvotes: 1

Related Questions