# add-to-global-webpack-plugin

> Use AddToGlobalWebpackPlugin to inject global variables into your app from your Webpack config. Ideal for setting up global configs, not sensitive API keys, or feature flags.

Latest version **0.0.4** (published 2024-11-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install add-to-global-webpack-plugin
pnpm add add-to-global-webpack-plugin
yarn add add-to-global-webpack-plugin
bun add add-to-global-webpack-plugin
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2024-11-25 |
| First published | 2024-04-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dolgov Ivan |
| Maintainers | idolgoff |
| Keywords | Webpack, Plugin, Global Variables, Configuration, API Keys, Feature Flags |

## Links

- npm: https://www.npmjs.com/package/add-to-global-webpack-plugin
- npm.io page: https://npm.io/package/add-to-global-webpack-plugin

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 0.0.4 (latest) — 2024-11-25
- 0.0.3 — 2024-04-17
- 0.0.2 — 2024-04-15
- 0.0.1 — 2024-04-15

## README

# AddToGlobalPlugin for Webpack

The `AddToGlobalPlugin` is a Webpack plugin designed to enhance your application by allowing you to inject global variables into the `window` or `global` object directly from your Webpack configuration. This can be particularly useful for storing some usefull meta information such as app versions, CI/CD process details, build date and time, for setting up global configurations, API keys, or feature flags.

## Advantages

-   **Simplicity**: Easy to set up with just a few lines of configuration.
-   **Flexibility**: Supports adding values to any depth within the `window` object using dot notation paths.
-   **No Additional Files**: Injects values directly into the main chunk without creating extra files.
-   **Runtime Efficiency**: Executes the injection at runtime, ensuring no impact on build-time processes.

## Installation

To install the `AddToGlobalPlugin`, you can simply copy the plugin code into a file in your project, typically named `AddToGlobalPlugin.js`.

## Usage

First, import the plugin at the top of your Webpack configuration file:

```javascript
const AddToGlobalPlugin = require("./path/to/AddToGlobalPlugin");
```

Then, add the plugin to your Webpack configuration:

```javascript
module.exports = {
    // ... other webpack config
    plugins: [
        new AddToGlobalPlugin({
            path: "myApp.meta",
            value: {
                version: "v1.1.3.7684",
                hash: "1f24b06c2971a254798e48e91b11c9559343bb62",
                buildDate: "Fri Apr 12 14:14:24 2024",
            },
        }),
    ],
};
```

This configuration will inject your value into `window.myApp.meta`.

## Examples

Here’s an example of how to use the plugin to inject a nested configuration object into the window object:

```javascript
new AddToGlobalPlugin({
    path: "myApp.config",
    value: {
        apiKey: "abcde12345",
        featureFlags: {
            betaFeature: true,
        },
    },
});
```

After the build, your application will have access to `window.myApp.config.apiKey` and `window.myApp.config.featureFlags.betaFeature`.

## Contributing

Contributions are welcome! Feel free to submit pull requests or create issues for any bugs you find or enhancements you propose.

---
_Source: https://npm.io/package/add-to-global-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._