1. babel-plugin-transform-define
Babel plugin that replaces member expressions and typeof statements with strings
babel-plugin-transform-define
Package: babel-plugin-transform-define
Created by: FormidableLabs
Last modified: Tue, 02 Jan 2024 13:30:35 GMT
Version: 2.1.4
License: MIT
Downloads: 575,760
Repository: https://github.com/FormidableLabs/babel-plugin-transform-define

Install

npm install babel-plugin-transform-define
yarn add babel-plugin-transform-define
Babel Plugin Transform Define — Formidable, We build the modern web

npm version Maintenance Status

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.

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin