babel-plugin-transform-define

What is babel-plugin-transform-define?

babel-plugin-transform-define is a Babel plugin that allows you to define global constants at compile time. This can be useful for injecting environment-specific variables or configuration settings directly into your code, which can then be optimized away by minifiers.

What are babel-plugin-transform-define's main functionalities?

Define Global Constants

This feature allows you to define global constants that can be used throughout your code. In the example, `process.env.NODE_ENV` and `__VERSION__` are defined and can be used to conditionally execute code or display version information.

/* .babelrc */
{
  "plugins": [
    ["transform-define", {
      "process.env.NODE_ENV": "'production'",
      "__VERSION__": "'1.0.0'"
    }]
  ]
}

// source code
if (process.env.NODE_ENV === 'production') {
  console.log('Running in production mode');
}
console.log('Version:', __VERSION__);

Environment-Specific Configuration

This feature allows you to inject environment-specific configuration settings directly into your code. In the example, `API_URL` is defined and used to make a fetch request to a specific API endpoint.

/* .babelrc */
{
  "plugins": [
    ["transform-define", {
      "API_URL": "'https://api.example.com'"
    }]
  ]
}

// source code
fetch(API_URL + '/endpoint')
  .then(response => response.json())
  .then(data => console.log(data));

Other packages similar to babel-plugin-transform-define

babel-plugin-transform-inline-environment-variables

babel-plugin-transform-inline-environment-variables is a Babel plugin that allows you to inline environment variables into your code. Unlike babel-plugin-transform-define, which allows you to define arbitrary constants, this plugin specifically focuses on inlining environment variables. This can be useful for injecting environment-specific settings directly into your code.

babel-plugin-inline-replace-variables

babel-plugin-inline-replace-variables is a Babel plugin that allows you to replace variables in your code with specified values at compile time. This is similar to babel-plugin-transform-define, but it offers more flexibility in terms of the types of replacements you can perform. It can be used to replace any variable with a specified value, not just environment variables.

babel-plugin-preval

babel-plugin-preval is a Babel plugin that allows you to evaluate code at build time and inline the result into your code. This is more powerful than babel-plugin-transform-define, as it allows you to perform arbitrary computations and inject the results into your code. However, it is also more complex and may not be necessary for simpler use cases.

README

Compile time code replacement for babel similar to Webpack's DefinePlugin

---

Quick Start

$ npm install --save-dev babel-plugin-transform-define

.babelrc

{
  "plugins": [
    ["transform-define", {
      "process.env.NODE_ENV": "production",
      "typeof window": "object"
    }]
  ]
}

.babelrc.js

// E.g., any dynamic logic with JS, environment variables, etc.
const overrides = require("./another-path.js");

module.exports = {
  plugins: [
    ["transform-define", {
      "process.env.NODE_ENV": "production",
      "typeof window": "object",
      ...overrides
    }]
  ]
};

Reference Documentation

babel-plugin-transform-define can transform certain types of code as a babel transformation.

Identifiers

.babelrc

{
  "plugins": [
    ["transform-define", {
      "VERSION": "1.0.0",
    }]
  ]
}

Source Code

VERSION;

window.__MY_COMPANY__ = {
  version: VERSION
};

Output Code

"1.0.0";

window.__MY_COMPANY__ = {
  version: "1.0.0"
};

---

Member Expressions

.babelrc

{
  "plugins": [
    ["transform-define", {
      "process.env.NODE_ENV": "production"
    }]
  ]
}

Source Code

if (process.env.NODE_ENV === "production") {
  console.log(true);
}

Output Code

if (true) {
  console.log(true);
}

---

Unary Expressions

.babelrc

{
  "plugins": [
    ["transform-define", {
      "typeof window": "object"
    }]
  ]
}

Source Code

typeof window;
typeof window === "object";

Output Code

'object';
true;

---

License

MIT License

Maintenance Status

Stable: Formidable is not planning to develop any new features for this project. We are still responding to bug reports and security concerns. We are still welcoming PRs for this project, but PRs that include new features should be small and easy to integrate and should not include breaking changes.

Changelog

2.1.4

Patch Changes

• follow-up to last release, also prevent object properties from being replaced (#88)