评论

关于小程序切换不同环境的学习总结

关于小程序切换不同环境的学习总结

关于小程序切换不同环境的学习总结

~

今天看到掘金上一篇介绍切换小程序环境的文章收获非常大,总结下,以下文字摘录自原文,并做部分整理


微信小程序目前为止还没有提供API或者具体的配置方式,给我们设置环境变量,所以还得自己想办法。

大概的想法就是设置一个配置文件(/utils/baseData.js),在需要的地方引入,然后在不同的情况下用node处理配置文件。

具体步骤如下:


设置一个baseData.js文件,在需要的地方引入

这样就完成了第一步,把配置文件引入到项目中


在根目录新建/env文件夹



/env文件夹下创建dev.jsonprod.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文件,可以说是很方便了。


如需了解详情,可以移步掘金

https://juejin.cn/post/6939778o6439796o6543

最后一次编辑于  03-19  
点赞 3
收藏
评论

1 个评论

  • 红小豆
    红小豆
    03-19

    其实在刚开始开发小程序的时候,我都是自建服务器 ,自建服务器肯定就存在环境切换的问题,开发,体验和发布版本都对应不同的数据库,不同api请求,如果切换环境是每一个小程序初学者都必须考虑的问题,之前困扰了我很久,直到今天算是得到圆满的答案

    03-19
    赞同
    回复
登录 后发表内容