babel-plugin-debug
v1.0.1
Published
Babel plugin that replaces the "debug" keyword with an condition for dev- and debug-specific code.
Downloads
6
Readme
babel-plugin-debug
this plugin replaces debug-statements with environment related if-statements which can be garbage-collected by minifiers
how it works
example:
debug: {
// log something for development
}
will be converted to
if(process.env.DEBUG === 'true') {
// log something for development
}
so, when the transpiled code is run, the code block will only be executed when run the environment variable DEBUG
is set.
use with webpack
when used with webpack you can use the webpack.DefinePlugin
to pass the DEBUG
variable
plugins: [
new webpack.DefinePlugin({
'process.env': {
'DEBUG': `"${process.env.DEBUG}"`
}
})
]
example
debug: {
// log something for development
}
and webpack is run with
DEBUG=true webpack
this yields the following output:
if(true) {
// log something for development
}
which then can be collected by minifiers
when webpack is run with
webpack
then this yields the following output
if(false) {
// log something for development
}
where as then the whole block will be thrown to trash by minifiers
little extra: named debugs
sometimes you want to give scopes to your debug statements so you can do the following:
debug_myblock: {
// some debug
}
then you can enable these with the following
DEBUG=myblock webpack
this generates the following JS
if(process.env.DEBUG === 'true' || process.env.DEBUG === 'myblock') {
}
NOTE: all scopes are enabled when used with DEBUG=true
(obviously)