1. babel-plugin-transform-replace-expressions
Replace JavaScript expressions with other expressions
babel-plugin-transform-replace-expressions
Package: babel-plugin-transform-replace-expressions
Created by: jviide
Last modified: Tue, 11 Jul 2023 09:27:53 GMT
Version: 0.2.0
License: MIT
Downloads: 268,494
Repository: https://github.com/jviide/babel-plugin-transform-replace-expressions

Install

npm install babel-plugin-transform-replace-expressions
yarn add babel-plugin-transform-replace-expressions

babel-plugin-transform-replace-expressions CircleCI npm

Replace JavaScript expressions with other expressions.

Installation

$ yarn add --dev babel-plugin-transform-replace-expressions

Example

Input file:

 const env = process.env.NODE_ENV;

typeof Hello === "number";

.babelrc:

 {
  "plugins": [
    [
      "babel-plugin-transform-replace-expressions",
      {
        "replace": {
          "process.env.NODE_ENV": "\"production\"",
          "typeof Hello": "42"
        }
      }
    ]
  ]
}

Output:

 const env = "production";

42 === "number";

Conflict resolution

A conflict happens when two replacements have the same Babel abstract syntax tree representation. For example expressions typeof A and typeof (A) are formatted differently but have the same AST representation as far as the plugin is concerned. In those situations the default is to raise an error, and can be overwritten by setting the option allowConflictingReplacements to true.

You can also always give the replacements as an array of key-value pairs. When allowConflictingReplacements is set to true the last conflicting replacement gets selected.

 {
  "plugins": [
    [
      "babel-plugin-transform-replace-expressions",
      {
        "replace": [
          ["typeof A", "B"],
          ["typeof (A)", "C"]
        ],
        "allowConflictingReplacements": true
      }
    ]
  ]
}

Notes

  • Replacements are only applied to expressions. Therefore replacing DEBUG with false in const DEBUG = true does nothing, but for if (DEBUG) {} the result is if (false) {}.

  • Only full expressions count. You can't replace env in process.env.NODE_ENV, you have to replace process.env, which is a proper expression in Babel AST.

  • A replacement is only applied when the result is valid JavaScript. For example replacing a with 2 in the following code:

     a = 1;
    b = a;
    

    yields

     a = 1;
    b = 2;
    

License

This plugin is licensed under the MIT license. See LICENSE.

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