Taro支持appid按环境自动切换

背景

微信的appid在正式环境和测试环境不同，需要手动切换appid，比较容易出错。最好实现执行指令的时候直接自动处理。

实现

1.安装cross-env

npm i cross-env -D

2.修改根目录下project.config.json的脚本

a. config/增加文件 updateProjectConfig.js

/**
 * 根据环境更新../project.config.json中的appid字段
 * @env NODE_ENV=development 将config/dev.js中的appid配置设置到../project.config.json中
 * @env NODE_ENV=production 将config/prod.js中的appid配置设置到../project.config.json中
 */
const fs = require('fs');
const path = require('path')
const DEV_CONFIG = require('./dev');
const PROD_CONFIG = require('./prod');

const { readFileSync, writeFileSync } = fs;


function updateProjectConfig (filePath) {
    const fileOption = { encoding: 'utf-8' }
    const fileContent = readFileSync(filePath, fileOption);
    let config = JSON.parse(fileContent.toString());
    if (process.env.NODE_ENV==='development') {
        config.appid = DEV_CONFIG.appid;
        console.log('[DEV] appId = ' + config.appid);
    } else {
        config.appid = PROD_CONFIG.appid;
        console.log('[PROD] appId = ' + config.appid);
    }
    let newStr = JSON.stringify(config,null,2)
    writeFileSync(filePath, newStr, fileOption);
}

updateProjectConfig(path.join(__dirname, '../project.config.json'))

b. 增加命令

package.json下面增加指令

新增precond-weapp:dev和precond-weapp:prod,指令 修改build:weapp,dev:weapp,增加appid设置，同时新增build-dev和dev-prod指令

{
    
  "scripts": {
    "precond-weapp:dev": "cross-env NODE_ENV=development node ./config/setProjectConfig.js",
    "precond-weapp:prod": "cross-env NODE_ENV=production node ./config/setProjectConfig.js",
    "build:weapp": "npm run precond-weapp:prod && taro build --type weapp",
    "dev:weapp": "npm run precond-weapp:dev && taro build --type weapp -- --watch",
    "dev-prod:weapp": "npm run precond-weapp:prod && taro build --type weapp -- --watch --env production",
    "build-dev:weapp": "npm run precond-weapp:dev && taro build --type weapp --env development"
  }
}

• 测试环境开发 dev:weapp
• 正式环境开发 dev-prod:weapp
• 测试环境部署 build-dev:weapp
• 正式环境部署 build:weapp

代码根据环境设置

代码中使用process.env.NODE_ENV判断环境

const IS_DEV = process.env.NODE_ENV === 'development';

编译后，会自动替换process.env.NODE_ENV值