parcel-transformer-vars v1.0.1
parcel-transformer-vars
A Parcel 2.0+ plugin for injecting variables based on a JS config.
Why I made this:
I want to be able to easily inject variable values into my JS that are dynamic to the environment and easily grab things like version numbers from the package.json without having my app require it directly and potentially including more than I want.
I want these variables to be able to exist anywhere in my JS and I want them to be injected as the right type of value based on the type that the value is in my config.
For example if you define the following vars object;
const pkg = require('./package.json')
module.exports = {
APP_VERSION: pkg.version,
BUILD_TIME: Date.now(),
IS_AWESOME: true,
}
Examples:
// will also replace quotes so it will evaluate to 'number'
// after being replaced.
console.log(typeof 'BUILD_TIME')
// This will stay a string because the value is a string
console.log(typeof 'APP_VERSION')
// This will become a boolean (removing quotes)
console.log(typeof 'IS_AWESOME')
How to use it
Create a .varsrc.js
config at the root of your directory. It should contain something like this:
const pkg = require('./package.json')
module.exports = {
// grab version from package.json
APP_VERSION: pkg.version,
// grab app name from package.json
APP_NAME: pkg.name,
// some other thing
API_URL: process.env.API_URL || 'https://dev.api.com',
// this one will be a boolean that will be `false` when you run `parcel build`
IS_DEV: process.env.NODE_ENV !== 'production',
}
Then, you must tell parcel to use the plugin. So you create / edit your .parcelrc
as follows:
{
"extends": "@parcel/config-default",
"transformers": {
"*.js": ["parcel-transformer-vars", "..."]
}
}
Note: the "..."
is important it tells parcel to do this first before the other stuff it would normally do.
If with that .varsrc.js
and .parcelrc
when you use Parcel in dev server or build mode this plugin will inject variables.
So, this:
if ('IS_DEV') {
console.log('This whole block will be totally gone when running parcel build')
}
Please note: this also works in inline JS you have in your HTML.
tests
See packages/parcel-test-project
install
npm install parcel-transformer-vars
Change log
1.0.1
: Adding check in case plugin config is not defined yet1.0.0
: First public release.
credits
If you like this follow @HenrikJoreteg on twitter.