ts-transform-define

KO | EN

gitlite — search

#python #ai #typescript #go #machine-learning #rust #deep-learning #docker #macos #windows #awesome-list #security #mcp #ios

ts-transform-define

(★ 8)

Create global constants which can be configured at compile time using the TypeScript compiler.

ts-transform-define Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ts-transform-define [![npm](https://img.shields.io/npm/v/ts-transform-define?style=flat-square)](https://www.npmjs.com/package/ts-transform-define)

Allows you to create global constants which can be configured at compile time.
This is the TypeScript equivalent of https://webpack.js.org/plugins/define-plugin/.

## Usage

```bash
npm i ts-transform-define ttypescript
```

Update your tsconfig.json:

```json
{
  "compilerOptions": {
    "plugins": [
      {
        "transform": "ts-transform-define",
        "replace": {
          "PRODUCTION": "true",
          "VERSION": "'5fa3b9'",
          "BROWSER_SUPPORTS_HTML5": true,
          "TWO": "1+1",
          "typeof window": "'object'",
          "process.env.NODE_ENV": "process.env.NODE_ENV",
          "isNodeEnvironment()": "true"
        }
      }
    ]
  }
}
```

Run TTypeScript instead of TypeScript:

```diff
-tsc
+ttsc
```

> Note that because the plugin does a direct text replacement,
> the value given to it must include actual quotes inside of the string itself.
> Typically,
> this is done either with alternate quotes,
> such as '"production"'.

**index.ts**

```js
if (!PRODUCTION) {
  console.log('Debug info');
}

if (PRODUCTION) {
  console.log('Production log');
}
```

After passing through the transformer:

```js
if (!true) {
  console.log('Debug info');
}
if (true) {
  console.log('Production log');
}
```

and then after a minification pass results in:

```js
console.log('Production log');
```

### Environment variables

When replacing with environment variables it will pass them through,
so if we have this code:

```ts
if (process.env.NODE_ENV === 'development') {
  doLotsOfWorkInDev();
}
```

And then we have this config

```json
{
  "compilerOptions": {
    "plugins": [
      {
        "transform": "ts-transform-define",
        "replace": {
          "process.env.NODE_ENV": "process.env.NODE_ENV"
        }
      }
    ]
  }
}
```

And then we run

```bash
NODE_ENV="production" ttsc
```

The code gets transformed to

```tsx
if ('production' === 'development') {
  doLotsOfWorkInDev();
}
```

Which minifiers will see `false` in the if statement and delete the block.

## Gotchas

When replacing with environment variables, e.g. `process.env.NODE_ENV` - if it is not set at build time it will ignore replacing the expression.

E.g:

```json
{
  "compilerOptions": {
    "plugins": [
      {
        "transform": "ts-transform-define",
        "replace": {
          "process.env.NODE_ENV": "process.env.DONT_EXIST"
        }
      }
    ]
  }
}
```

Will result in:

```ts
if (process.env.NODE_ENV === 'development') {
  doLotsOfWorkInDev();
}
```

Instead of:

```ts
if (process.env.DONT_EXIST === 'development') {
  doLotsOfWorkInDev();
}
```

ts-transform-define

ts-transform-define Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

ts-transform-define

ts-transform-define Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README