Search code examples
typescriptwebpackumd

Webpack: Global var for use in non-module code

I'm trying to make use of Typescript UMD modules (which don't fallback to a global var when require() doesn't exist) with legacy code that is not in any module pattern.

I was hoping that Webpack would have a loader or plugin that would create global vars for specific modules (instead of loading them as modules).

For example I have Typescript UMD module in a Node package:

node_modules/my-new-module

Which exports a function

myNewFunction(){ }

And I want to use it in my legacy code as:

myNewModule.myNewFunction(); //myNewModule is a global variable

Currently my best solution is to load all my shared modules in and manually assign them to globals. Of course this isn't ideal.

Can Webpack do this? Is there another solution?

Thanks

Solution

  • With Webpack, you can expose your module as a library (global var will be generated):

    If library is set and libraryTarget is not, libraryTarget defaults to var as specified in the output configuration documentation. See output.libraryTarget there for a detailed list of all available options.

    Take a look here: https://webpack.js.org/guides/author-libraries/#add-librarytarget