小程序工程化-环境变量配置管理

引言

我们在项目开发的过程中，会把环境分为开发环境、测试环境、生产环境等，社区里也有很多类似cross-env环境管理工具。但是在小程序的生态环境中，并没有成熟的解决方案来管理环境变量，开发者往往需要自己手动维护一些项目配置信息，这样做虽然没什么问题，但是随着项目的增大，要维护的配置信息可能会越来越多，我们很难保证不出错。下面我们将利用node的一些知识实现简单的环境变量配置管理。

建立配置文件

首先我们在项目根目录新建一个config文件夹，并在config文件夹下分别建立env/dev.json和env/prod.json等若干不同环境配置文件。分别放置该环境的配置信息，例如

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

然后我们在根目录建立一个放置默认配置的projectConfig.js文件,并把它引入到app.js

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

这样子就完成了第一步：把配置信息引入到了我们的项目中。

根据命令行，选择对应的env下的配置文件

接下来在我们项目的package.json里scripts增加两条命令行,用来启动不同的环境

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

在根目录建立switch.js，利用node.js处理配置信息

/**
 * 根据命令行运行参数，修改/config.js 里面的项目配置信息，
 */

const fs = require('fs')
const path = require('path')
//源文件
const sourceFiles = {
  prefix: '/config/env/',
  dev: 'dev.json',
  prod: 'prod.json'
}
//目标文件
const targetFiles = [{
  prefix: '/',
  filename: 'projectConfig.js'
}]
const preText = 'module.exports = '
// 获取命令行参数
const cliArgs = process.argv.splice(2)
const env = cliArgs[0]
// 判断是否是 prod 环境
const isProd = env.indexOf('prod') > -1 ? true : false
// 根据不同环境选择不同的源文件
const sourceFile = isProd ? sourceFiles.prod : sourceFiles.dev
// 根据不同环境处理数据
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)
    }
    // 获取源文件中的内容
    const targetConfig = JSON.parse(data)
    // 将获取的内容写入到目标文件中
    targetFiles.forEach(function(item, index) {
      let result = null
      if (item.filename === 'config.js') {
        result = preText + JSON.stringify(targetConfig, null, 2)
      }
      console.log(result)
      // 写入文件(这里只做简单的强制替换整个文件的内容)
      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)
        }
      })
    })
  })

这样子当我们输入不同的命令行，动态的将相应环境配置信息写入默认配置文件，并引入到项目中。

与开发者工具关联

每次切换环境都要自己运行npm脚本，也会有点不方便，这个时候我们可以配置开发者工具在开发者工具的本地设置中，勾选启用自定义处理命令，并分别在编译前预处理和上传前预处理填入我们的命令

这样子就保证了开发环境和生产环境隔离，避免产生脏数据。

写在最后

欢迎大家关注我的公众号：前端Readhub 。😄😄