Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itsdouges/ts-transform-define
Create global constants which can be configured at compile time using the TypeScript compiler.
https://github.com/itsdouges/ts-transform-define
Last synced: 21 days ago
JSON representation
Create global constants which can be configured at compile time using the TypeScript compiler.
- Host: GitHub
- URL: https://github.com/itsdouges/ts-transform-define
- Owner: itsdouges
- License: mit
- Created: 2020-04-21T08:31:54.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T03:55:15.000Z (almost 2 years ago)
- Last Synced: 2024-04-09T21:18:13.288Z (7 months ago)
- Language: TypeScript
- Homepage:
- Size: 1010 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-typescript-ecosystem - ts-transform-define - Allows you to create global constants which can be configured at compile time. (Transformers / General transformers)
README
# ts-transform-define [](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();
}
```