Environment variables
Environment variables provide a more streamlined way to manage your build process. We can also use it to define "build toggles", or environment-based variables that will be injected into your scripts to be used during runtime.
Setting it up
Let's say that we want to set
NODE_ENV to production for uploading to our main branch, and development for uploading to our Simulation branch. First we'll catch the environment variable and assign the compile target based on it.1
// rollup.config.js
2
3
const isProduction = process.env.NODE_ENV === 'production'
4
5
// use the `main` target from `screeps.json` in production mode
6
const cfg = isProduction ? 'main' : 'sim';
7
8
export default {
9
// ...
10
plugins: [
11
// ...
12
screeps({
13
config: require("./screeps")[cfg],
14
// if `NODE_ENV` is local, perform a dry run
15
dryRun: process.env.NODE_ENV === 'local'
16
})
17
]
18
}
Copied!
Running a deploy
Then we'll change the build tasks on
package.json to pass the environment variable before running the rollup command.1
{
2
"tasks": {
3
"deploy-prod": "NODE_ENV=production rollup -c",
4
"deploy-dev": "NODE_ENV=development rollup -c",
5
}
6
}
Copied!
On Windows, setting the environment variables as defined above will not work. For a cross-platform solution to define environment variables, use
cross-env.1
npm install --save-dev cross-env
Copied!
1
{
2
"tasks": {
3
"deploy-prod": "cross-env NODE_ENV=production rollup -c",
4
"deploy-dev": "cross-env NODE_ENV=development rollup -c",
5
}
6
}
Copied!
Now let's give it a try! Run
npm run deploy-dev or npm run deploy-prod and see if your code is uploaded properly.Setting up build toggles
You can also setup deployment-dependent variables (aka. "build toggles") that are injected to your code during build time to allow for more advanced optimisations like dead code elimination.
To do this, install
rollup-plugin-replace.1
# npm
2
$ npm install --save-dev rollup-plugin-replace
3
4
# yarn
5
$ yarn add --dev rollup-plugin-replace
Copied!
Then configure your
rollup.config.js to include your desired variables.1
// rollup.config.js
2
import replace from 'rollup-plugin-replace';
3
4
export default {
5
plugins: [
6
replace({
7
// returns 'true' if code is bundled in prod mode
8
PRODUCTION: JSON.stringify(isProduction),
9
// you can also use this to include deploy-related data, such as
10
// date + time of build, as well as latest commit ID from git
11
__BUILD_TIME__: JSON.stringify(Date.now()),
12
__REVISION__: JSON.stringify(require('git-rev-sync').short()),
13
})
14
]
15
};
Copied!
Generally, you need to ensure that
rollup-plugin-replace goes before other plugins, so we can be sure Rollup replaces these variables correctly and the remaining plugins can apply any optimisations (e.g. dead code elimination) correctly.Because these values are evaluated once as a string (for the find-and-replace), and once as an expression, they need to be wrapped in
JSON.stringify.Variables set by this plugin will be replaced in the actual output JS code. When compiling your code, Rollup will replace the variable names with the output of the supplied expression or value.
Once it's set up, you use it in your code.
1
// log the latest commit ID from git
2
if (__REVISION__) {
3
console.log(`Revision ID: ${__REVISION__}`)
4
}
5
6
export function loop() {
7
if (!PRODUCTION) {
8
// will only be included in development mode
9
devLogger.log('loop started')
10
}
11
}
Copied!
Notes
Since TypeScript won't recognise these variables if you pass it blindly into your code, you will still need to declare them in a type definition (.d.ts) file.
1
// file.d.ts
2
3
declare const __REVISION__: string;
4
declare const __BUILD_TIME__: string;
Copied!
Also, be careful not to use too common of a name, because it will replace it throughout your code without warning. A good standard is to make the variables all caps, and surrounded by double underscores, so they stand out (e.g.
__REVISION__).Last modified 3yr ago
Copy link