Code Monkey home page Code Monkey logo

babel-plugin-const-enum's Introduction

babel-plugin-const-enum · npm version npm downloads

Transform TypeScript const enums

Install

Using npm:

npm install --save-dev babel-plugin-const-enum

or using yarn:

yarn add babel-plugin-const-enum --dev

Usage

You are most likely using @babel/preset-typescript or @babel/plugin-transform-typescript along with this plugin.

If you are using @babel/preset-typescript, then nothing special needs to be done since plugins run before presets.

If you are using @babel/plugin-transform-typescript, then make sure that babel-plugin-const-enum comes before @babel/plugin-transform-typescript in the plugin array so that babel-plugin-const-enum runs first. This plugin needs to run first to transform the const enums into code that @babel/plugin-transform-typescript allows.

.babelrc

{
  "plugins": ["const-enum", "@babel/transform-typescript"]
}

transform: removeConst (default)

Removes the const keyword to use regular enum. Can be used in a slower dev build to allow const, while prod still uses tsc. See babel#6476.

// Before:
const enum MyEnum {
  A = 1,
  B = A,
  C,
  D = C,
  E = 1,
  F,
  G = A * E,
  H = A ** B ** C,
  I = A << 20
}

// After:
enum MyEnum {
  A = 1,
  B = A,
  C,
  D = C,
  E = 1,
  F,
  G = A * E,
  H = A ** B ** C,
  I = A << 20
}

.babelrc

{
  "plugins": [
    "const-enum"
  ]
}

Or Explicitly:

.babelrc

{
  "plugins": [
    [
      "const-enum",
      {
        "transform": "removeConst"
      }
    ]
  ]
}

transform: constObject

Transforms into a const object literal. Can be further compressed using Uglify/Terser to inline enum access. See babel#8741.

// Before:
const enum MyEnum {
  A = 1,
  B = A,
  C,
  D = C,
  E = 1,
  F,
  G = A * E,
  H = A ** B ** C,
  I = A << 20
}

// After:
const MyEnum = {
  A: 1,
  B: 1,
  C: 2,
  D: 2,
  E: 1,
  F: 2,
  G: 1,
  H: 1,
  I: 1048576
};

.babelrc

{
  "plugins": [
    [
      "const-enum",
      {
        "transform": "constObject"
      }
    ]
  ]
}

Troubleshooting

SyntaxError

You may be getting a SyntaxError because you are running this plugin on non-TypeScript source. You might have run into this problem in react-native, see:
babel-plugin-const-enum#2
babel-plugin-const-enum#3

This seems to be caused by react-native transpiling flow code in node_modules. To fix this issue, please use babel-preset-const-enum to only run babel-plugin-const-enum on TypeScript files. If you wish to fix the issue manually, check out the solution in babel-plugin-const-enum#2.

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.