
Security News
The Changelog Podcast: Practical Steps to Stay Safe on npm
Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.
ifdef-loader
Advanced tools
Webpack loader that allows JavaScript or TypeScript conditional compilation (`#if ... #else ... #endif`) directly from Webpack.
Webpack loader that allows JavaScript or TypeScript conditional compilation (#if ... #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:
/// #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:
/// #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.
The #if clauses can also be nested:
/// #if PRODUCTION
/// #if OS=="android"
android_code();
/// #endif
/// #if OS=="ios"
ios_code();
/// #endif
/// #endif
Additionally, #else clauses can be defined for every #if clause:
/// #if PRODUCTION
console.log('Production!');
/// #else
console.log('Something else!');
/// #endif
In webpack build directory:
npm install ifdef-loader --save-dev
Example of use with TypeScript files, enabling the DEBUG and version variables:
In webpack.config.json chain it before ts-loader:
// 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
};
// pass as JSON object into query string ?json=...
const q = require('querystring').encode({json: JSON.stringify(opts)});
//...
{ test: /\.tsx?$/, exclude: /node_modules/, loaders: [ "ts-loader", `ifdef-loader?${q}` ] }
//...
in example.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
MIT
Contributions in the form of issues or pull requests are welcome.
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.
FAQs
Webpack loader that allows JavaScript or TypeScript conditional compilation (`#if ... #elif ... #else ... #endif`) directly from Webpack.
The npm package ifdef-loader receives a total of 15,112 weekly downloads. As such, ifdef-loader popularity was classified as popular.
We found that ifdef-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Security News
Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.

Security News
Experts push back on new claims about AI-driven ransomware, warning that hype and sponsored research are distorting how the threat is understood.

Security News
Ruby's creator Matz assumes control of RubyGems and Bundler repositories while former maintainers agree to step back and transfer all rights to end the dispute.