taro区分编译环境,根据编译的不同的端打包到不同的目录

taro是一个多端统一开发框架,可以实现编写一套代码,实现编译输出不同的端,主要有微信小程序、支付宝小程序、H5、快应用、React Native以及百度小程序、头条小程序、京东小程序等,基本上覆盖到所有的端了,框架默认的编译输出目录为dist,但我们使用taro的目的是为了多端统一开发,需要将不同的端编译输出到不同的目录,以满足我们同时开发的目的.

taro给我们提供了process.env.TARO_ENV变量来判断编译时环境,我们可以通过下面的方式依据编译时环境来编译输出到不同的目录:

// 修改的文件:config/index.js
let env = process.env.TARO_ENV //编译时环境
var outputRoot = ''
switch(env){
  case 'weapp':
    outputRoot= 'dist_weapp'
    break
  case 'h5':
    outputRoot='dist_h5'
    break
  case 'alipay':
    outputRoot='dist_alipay'
    break
  case 'tt':
    outputRoot= 'dist_tt'
    break
  default:
    outputRoot= 'dist'
}

const config = {
  // 其他配置……
  outputRoot: outputRoot,
  // 其他配置……
}

或者我们可以直接简单的配置一下输出目录就可以了,还是在config/index.js文件中,将outputRoot输出目录更改为接收动态参数,直接生成和目标平台同名的目录,前提是dist目录需要有写入权限.

outputRoot: `dist/${process.env.TARO_ENV}`,

这样,也达到了和上面同样的将不同的终端代码编译输出到不同目录的效果,只是所有的终端目录都在dist目录下,会在dist目录下生成诸如h5、weapp、alipay等的目录.这样,我们编译代码的方式不变,仍旧是npm run build:alipay这样的方法.可以参考文档:https://taro-docs.jd.com/taro/docs/envs-debug/