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

引言

我们在项目开发的过程中，会把环境分为开发环境、测试环境、生产环境等，社区里也有很多类似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) {
thrownewError(`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) {
thrownewError(`error occurs when reading file ${sourceFile}. Error detail: ${err}`)
process.exit(1)
}
})
})
})

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

与开发者工具关联

每次切换环境都要自己运行npm脚本，也会有点不方便，这个时候我们可以配置开发者工具

在开发者工具的本地设置中，勾选启用自定义处理命令，并分别在编译前预处理和上传前预处理填入我们的命令

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

以上是 小程序工程化环境变量配置管理 的全部内容， 来源链接： utcz.com/a/20019.html

回到顶部