Search code examples
javascripttypescriptecmascript-6webpackumd

Webpack: How to hide export functions/variables under one global variable?


I am changing the way a TypeScript library is building, from gulp concat + typescript compiler to Webpack.

The library now can be used with require/import key words. However, I have to leave the ability to use a library in a classic way, including script into html header.

Before all functions/variables were hidden under the global variable Survey. To make it happen the typescript namespace Survey {} was used and all require classes/variables use export key word.

I had to remove the namespace and now, to achieve the same, having one global variable, I have to include all needed export classes/variables into the build entry point file:

https://github.com/dmitrykurmanov/surveyjs/blob/bd62cd7388960a0230767b3bcf97e6332ee99cf3/src/entries/koBootstrapIndex.js

Is any other way to achieve the same, without creating this huge list?


Solution

  • Instead of importing, combining into an object literal and then re-exporting (via module.exports) you can use ES6 re-exports:

    import … from …
    export … // module.exports = {…};
    

    becomes

    export … from …
    

    So you still have to build a list of identifiers, but you don't have to repeat them any more.