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

~

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

微信小程序目前为止还没有提供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文件，可以说是很方便了。

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

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