Code Monkey home page Code Monkey logo

rollup-plugin-baked-env's Introduction

rollup-plugin-baked-env

LICENSE Node CodeFactor

Coverage Status Travis

Version Downloads

This plugin allow you to use environment variables inside your code by importing "process.env" as a module. The environment variable will be baked in your code at compile time. Only the variables being used are included in your bundled file.

Usage Examples

Inside your code you can do something like this:

Basic usage

import { FOO_BAR } from 'process.env';

// use the variable
if (FOO_BAR === 'foo') {
    // do stuff
}

Import variable, aliasing it to another name

import { FOO_BAR as myFooBar } from 'process.env';

if (myFooBar) {
    // code
}
else {
    // code
}

Import multiple variables

import { NODE_ENV, FOO, BAR } from 'process.env';

console.log(FOO, BAR);
if (NODE_ENV === 'production') {
    // code
}

Readability and consistency

If you used to plugins like EnvironmentPlugin or DefinePlugin they use find/replace to replace the constants in your source codoe, but reading the code it's unclear where a variable is coming from, also ESLint and prettier thinks those variables are globals, since there's no reference about then anywhere. This fixes the, whithout having to make a whitelist.

Validation by default

Your code will fail to compile if the code imports variables that are not set!

image

image

Caveats importing all variables

If you do import * as env from 'process.env' never use the env variable directly! This will cause rollup to embed ALL environment variables inside your bundle.

Works fine, but not recommended:

import * as env from 'process.env'; // ✋ AVOID!

if (env.production !== 'production') {
    console.log('My home directory is ' + env.HOME);
}

Because if you do this, bad things happen:

import * as env from 'process.env'; // ✋ BAD!

console.log(env); // 🚫 BAD! (DON'T DO THIS!)

Object.keys(env).filter(/* ... */) // 🚫 BAD! (if you access the env at runtime, it will force rollup to embed everything)

Installation

npm install --D rollup-plugin-baked-env
yarn add --dev rollup-plugin-baked-env

Adding to your project

rollup.config.js

import bakedEnv from 'rollup-plugin-baked-env';

export default {
    // ...
    plugins: [
        bakedEnv(),
    ],
};

Options

bakedEnv(variables, options)

Parameters Description Type Default Value
variables The variables to be exposed. object process.env
options.moduleName The name of the faux module. You can choose another name like 'environment_vars'` string 'process.env'
options.preferConst Embed variables in the code as const instead of var. boolean true
options.compact Generate code without line breaks. boolean false
options.indent The indentation to use in the generated code. string '\t'

Options example

import bakedEnv from 'rollup-plugin-baked-env';

const myVariables = {
  MY_VAR_1: 'value1',
  MY_VAR_2: 'value2',
};

export default {
  // ...
  plugins: [
    bakedEnv(myVariables, {
      moduleName: 'enviroment_vars', // expose variables as a module called 'enviroment_vars' example: `import { FOO } from 'enviroment_vars';`
      preferConst: true,
      compact: false,
      indent: '  ',
    }),
  ],
};

License

The code is available under the MIT license.

Contributing

We are open to contributions, see CONTRIBUTING.md for more info.

rollup-plugin-baked-env's People

Contributors

susnux avatar victornpb avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

susnux

rollup-plugin-baked-env's Issues

Support `@rollup/pluginutils` version 5

Currently this plugin depends on a peerDependency of @rollup/pluginutils on version 4.

To use this together with current babel plugin it must allow a peerDependency of @rollup/pluginutils version 5.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.