Skip to content

Latest commit

 

History

History
62 lines (44 loc) · 1.83 KB

README.md

File metadata and controls

62 lines (44 loc) · 1.83 KB

Webpack Safe Define Plugin

A typescript ready webpack plugin to easily include global variables on your outputted bundles


It is much alike the DotEnv plugin but also comes with the bonus of

  • safely introducing your plain javascript objects (instances of Classes will get stringified in the process) to your webpack projects (such as configuration) on the front-end.
  • having the flexibiliy on how your output is built, no process.env shackles
  • leveraging typescript's type checking

Usage:

webpack.config.ts
export default {
    // ....
    plugins: [
        /**
         * Any primitive values are allowed through
         **/
        new SafeDefinePlugin({
            variables: 'of',
            the: ['world', { unite: 1 }],
            bourgeoisie: null,
        }),
    ],
};
Your entrypoint.ts file
declare const variables: unknown;
declare const the: unknown;

console.log(variables, the);
Your output main.js file
console.log('of', ['world', { unite: 1 }]);

Further notes

  • Feel free to use this with other Define Plugin instances in the same webpack configuration, they work just as well (as long as outputed definitions do not compete)
  • Do you want your exposed variables to be under a specific path such as process.env? Just check out SafeDefinePluginOptions['exposureStrategy'], we accept custom names generators too!
  • Not all possible types have been introduced, if you have any issues, feel free to open a ticket

Future improvements

  • Leverage ts-morph to generate typescript defintion files for your declared variables
  • Introduce a JSON.stringify spy to allows for more freedom
  • More data types allowed for input

LICENSE

MIT