The introduction

During project development, we divide the environment into development environment, test environment, production environment, etc. There are also many cross-env environment management tools in the community. However, in the small program ecosystem, there is no mature solution to manage environment variables, and developers often need to manually maintain some of the project configuration information. This is fine, but as the project grows, the configuration information to maintain can be more and more difficult to ensure that there are no errors. Let’s use some of Node’s knowledge to implement simple environment variable configuration management.

Setting up a Configuration File

First, we create a config folder in the root directory of the project, and create several different environment configuration files such as env/dev. Json and env/prod.json in the config folder respectively. Place the configuration information for this environment separately, for example

    // config/env/dev.json
    {      
        "environment":"development"."defaultURL": "https://dev.xxx.com/api/"
    }
Copy the code

We then create a projectconfig.js file in the root directory to place the default configuration and import it into app.js

    // projectConfig.js
    module.exports ={
        "projectname": "xxx",}// app.js
    const config = require('./projectConfig') App({ ... .globalData: {
         ...config
        }
    })
Copy the code

This completes the first step: introducing configuration information into our project.

According to the command line, select the corresponding configuration file under env

Next, add two command lines to scripts in our project’s package.json to launch different environments

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"."switch:dev": "node switch.js --dev"."switch:prod": "node switch.js --prod"
    }
Copy the code

Create switch.js in the root directory and use Node.js to process the configuration information

/** * Modify the project configuration information in /config.js according to the command line parameters, */

const fs = require('fs')
const path = require('path')
/ / the source file
const sourceFiles = {
  prefix: '/config/env/'.dev: 'dev.json'.prod: 'prod.json'
}
// Target file
const targetFiles = [{
  prefix: '/'.filename: 'projectConfig.js'
}]
const preText = 'module.exports = '
// Get command line arguments
const cliArgs = process.argv.splice(2)
const env = cliArgs[0]
// Check whether the environment is proD
const isProd = env.indexOf('prod') > - 1 ? true : false
// Select different source files for different environments
const sourceFile = isProd ? sourceFiles.prod : sourceFiles.dev
// Process data for different environments
fs.readFile(__dirname + sourceFiles.prefix + sourceFile,
  (err, data) => {
    if (err) {
      throw new Error(`Error occurs when reading file ${sourceFile}.\nError detail: ${err}`)
      process.exit(1)}// Get the contents of the source file
    const targetConfig = JSON.parse(data)
    // Write the obtained content to the target file
    targetFiles.forEach(function(item, index) {
      let result = null
      if (item.filename === 'config.js') {
        result = preText + JSON.stringify(targetConfig, null.2)}console.log(result)
      // Write to the file (simply force the entire file to be replaced)
      fs.writeFile(__dirname + item.prefix + item.filename, result, 'utf8', (err) => {
        if (err) {
          throw new Error(`error occurs when reading file ${sourceFile}. Error detail: ${err}`)
          process.exit(1)}})})Copy the code

This way, when we enter different command lines, the corresponding environment configuration information is dynamically written into the default configuration file and imported into the project.

Associate with developer tools

In the local Settings of the developer tools, check enable custom processing commands, and fill in our commands in pre-compile and pre-upload preprocessing respectively

Write in the last

Welcome to pay attention to my public number: front-end Readhub. 😄 😄