关于小程序切换不同环境的学习总结
~
今天看到掘金上一篇介绍切换小程序环境的文章收获非常大,总结下,以下文字摘录自原文,并做部分整理
微信小程序目前为止还没有提供API或者具体的配置方式,给我们设置环境变量,所以还得自己想办法。
大概的想法就是设置一个配置文件(/utils/baseData.js
),在需要的地方引入,然后在不同的情况下用node处理配置文件。
具体步骤如下:
设置一个baseData.js文件,在需要的地方引入
这样就完成了第一步,把配置文件引入到项目中
在根目录新建/env
文件夹
在/env
文件夹下创建dev.json
和prod.json
两个json文件,分别用于存放开发环境和生产环境的常量。
在package.json的script下新增两条命令,用来启动不同的环境
根据命令行参数,选择/env
下的对应的配置文件
在根目录新建switch.js
文件,利用node处理配置信息。
* 根据命令行运行参数,修改/config.js 里面的项目配置信息,
*/
const fs = require('fs')
const path = require('path')
//源文件
const sourceFiles = {
prefix: '/env/',
dev: 'dev.json',
prod: 'prod.json'
}
//目标文件
const targetFiles = [{
prefix: '/utils/',
filename: 'baseData.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 === 'baseData.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)
}
})
})
})
当我们执行不同的命令时,switch.js
会动态的将相应的环境配置写入配置文件(/utils/baseData.js
)中。所以到这里基本完成我们的目标了。但每次切换环境都要运行npm脚本,也不是很方便。
所以最后一步很关键,就是配置我们的开发者工具,让它在预览和上传等操作前自动执行对应的npm脚本。
在开发者工具本地设置中,可以勾选启用自定义处理命令,如下图
小结: 这样之后,基本就实现了不同环境,使用不同的变量。每次只要更新对应环境的json
文件,可以说是很方便了。
如需了解详情,可以移步掘金