Front end Engineering – injecting runtime environment variables using build tools

Time:2021-9-16

Actual project requirements description

Get the current environment (production or development) at runtime, and then do different operations

Examples of actual project requirements

if(__env__) {
// do something
} else {
// do something
}

Implemented by Rollup

Train of thought description:

  • To realize the above requirements, we must find an “entry” that can distinguish the environment. Here we can distinguish it through NPM scripts, because different NPM scripts need to be executed in the development environment and production environment to build our project
  • Rollup can mount attributes to process.env through the — environment parameter in NPM script

example

package.json

{
// …
“scripts”: {

"build": "rollup -c --environment ENV:production",
"env": "rollup -c --environment ENV:development"
}

// …
}

rollup.config.js

//A plug-in implementation recommended by rollup’s official website is used here
import replace from ‘@rollup/plugin-replace’;

export default {

// ...

plugins: [

replace({
    __ env__:  JSON. Stringify (process. Env. Env) // note that variables need to be serialized here
})

]
// …
};

Actual business code snippet

//If you use ts for development, you need to declare it (in *. D.ts or directly in the TS file)
// declare var __env__: string;
console.info(__env__);

Through the above operations, you can use rollup to__ env__ The variable is compiled as “development” or “production”

Implemented via webpack

Train of thought description:

  • The implementation idea is basically the same as that of rollup, but the construction file is different. Look at the example directly

example

package.json

//Consistent with the above package.json

webpack.config.js

const { DefinePlugin } = require(‘webpack’);

Module. Exports = (Env) = > {/ / write through function instead of object

return {
    // ...
    plugins: [
        new DefinePlugin({
            __ env__:  JSON. Stringify (Env. Env) // obtained through the env variable injected by webpack
        })
    ]
}

}

Actual business code snippet

//Consistent with the above documents

Attention

Both webpack and rollback are generated by character replacement at compile time__ env__ Replace with the corresponding value, so ensure__ env__ If it cannot have the same name as the normal code, there will be no more examples here. Those interested can implement the above method, and then run a counterexample to see the effect

Tree shakingwebpack and rollup enable tree shaking by default. On the premise that the code has no side effects, the branch judgment statement and environment variables will make it clear that it is “useless”, as shown in the screenshot after rollup packaging below

Before packing

Front end Engineering - injecting runtime environment variables using build tools

After packing

Front end Engineering - injecting runtime environment variables using build tools

If you have time, update how to use Vue and react scaffolds