用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2020-6-3 00:11

引言 我们在项目开发的过程中,会把环境分为开发环境、测试环境、生产环境等,社区里也有很多类似cross-env环境管理工具。但是在小程序的生态环境中,并没有成熟的解决方案来管理环境变量,开发者往往需要自己手动维 ...

引言

我们在项目开发的过程中,会把环境分为开发环境、测试环境、生产环境等,社区里也有很多类似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 。


鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 纱窗下的猫 来自: 掘金