https://github.com/nippur72/ifdef-loader
Webpack loader for JavaScript/TypeScript conditional compilation.
https://github.com/nippur72/ifdef-loader
Last synced: 15 days ago
JSON representation
Webpack loader for JavaScript/TypeScript conditional compilation.
- Host: GitHub
- URL: https://github.com/nippur72/ifdef-loader
- Owner: nippur72
- Created: 2016-08-06T16:29:21.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-07-13T09:24:48.000Z (over 1 year ago)
- Last Synced: 2025-06-27T03:40:21.820Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 138 KB
- Stars: 291
- Watchers: 5
- Forks: 29
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-web-dev-resources - ifdef-loader
README
# ifdef-loader
Webpack loader that allows JavaScript or TypeScript conditional compilation (`#if ... #elif ... #else ... #endif`)
directly from Webpack.
Conditional compilation directives are written inside `///` triple slash comment so
that they don't effect normal JavaScript or TypeScript parsing.
Example:
```js
/// #if DEBUG
console.log("there's a bug!");
/// #endif
```
The `DEBUG` or any other variable can be specified when configuring the Webpack loader (see below).
The directive `#if` accepts any valid JavaScript expression:
```js
/// #if PRODUCTION && version.charAt(0)=='X'
console.log("Ho!");
/// #endif
```
If the expression is `true` the block of code between `#if` and `#endif` is included, otherwise is excluded by commenting it out.
Additionally, `#elif` and `#else` clauses can be added to an `#if` clause:
```js
/// #if env == 'PRODUCTION'
console.log('Production!');
/// #elif env == 'DEBUG'
console.log('Debug!');
/// #else
console.log('Something else!');
/// #endif
```
The `#if` clauses can also be nested:
```js
/// #if PRODUCTION
/// #if OS=="android"
android_code();
/// #elif OS=="ios"
ios_code();
/// #endif
/// #endif
```
## Installation
In webpack build directory:
```
npm install ifdef-loader --save-dev
```
## Configuration
Example of use with TypeScript files, enabling the `DEBUG` and `version` variables:
In `webpack.config.json` put `ifdef-loader` after `ts-loader` so that files are processed
before going into TypeScript compiler:
```js
// define preprocessor variables
const opts = {
DEBUG: true,
version: 3,
"ifdef-verbose": true, // add this for verbose output
"ifdef-triple-slash": false, // add this to use double slash comment instead of default triple slash
"ifdef-fill-with-blanks": true // add this to remove code with blank spaces instead of "//" comments
"ifdef-uncomment-prefix": "// #code " // add this to uncomment code starting with "// #code "
};
/* ... */ {
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{ loader: "ts-loader" },
{ loader: "ifdef-loader", options: opts }
]
}
// alternatively, options can be passed via query string:
const q = require('querystring').encode(opts);
/* ... */ {
test: /\.tsx?$/,
exclude: /node_modules/,
loaders: [ "ts-loader", `ifdef-loader?${q}` ]
}
```
in `example.ts`:
```ts
/// #if DEBUG
/* code to be included if DEBUG is defined */
/// #if version <2
/* code to be included if DEBUG is defined and version < 2*/
/// #endif
/// #endif
```
## Code in comments
Often times writing `#if` ... `#else` ... `#endif` results in code that is not syntactically valid
or does not pass the LINT check. A possible workaround is to hide such code in comments
and let `ifdef-loader` uncomment it if it's part of the block that has to be included in the output.
Example:
The following code is invalid because the linter sees a double declaration of the `a` variable.
```
// #if DEBUG
let a=1;
// #else
let a=2;
// #endif
```
Using code in comments:
```
// #if DEBUG
let a=1;
// #else
// #code let a=2;
// #endif
```
The code is now under comment so it's ignored by the linter; but it's uncommented
by `ifdef-loader` if the else branch has to be included in the output (that is when `DEBUG==false`).
The `// #code ` string prefix can be changed and has to be explictly specified
in the options object:
```
const opts = {
// ...
"ifdef-uncomment-prefix": "// #code ",
// ...
};
```
## License
MIT
## Contributions
Contributions in the form of issues or pull requests are welcome.
## Changes
- v2.3.0 added option `uncomment-prefix` to write code in comments allowing it to pass through linters and syntax checking
- v2.2.0 added option `fill-with-blanks` for removing code with blank spaces instead of `//` comments
- v2.1.0 added support for `#elif` clause.
- v2.0.0 BREAKING CHANGE: options are now passed using the
standard Webpack API (`loader-utils`). See below for the upgrade.
- v1.0.0 changed to triple slash comment syntax. Double slash syntax
deprecated and available by turning off the `ifdef-triple-slash` option.
- v1.0.3 fixed bug occurring with short lines. Improved handling of line
termination (CRLF vs LF) in order to preserve source maps.
- v1.1.0 added support for `#else` clauses.
## Upgrading from v1 to v2
In v2 options are passed differently than v1, so you need to update your `webpack.config.js`.
Just do the following simple changes:
```js
/* from */ const q = require('querystring').encode({json: JSON.stringify(opts)});
/* to */ const q = require('querystring').encode(opts);
/* you can keep the ... `ifdef-loader?${q}` ... syntax */
/* but it's better to pass options directly (see the docs) */
```