【taro react】 ---- 项目打包生成不同目录【代码编译到不同生产目录】

1. 官方文档

代码编译后的生产目录

2. 实际开发问题 不同端程序的打包，都会生成到dist文件夹下边，这就导致如果同时多端调试或者打包，会很麻烦！

不同程序的打包命令！
/package.json

"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt",
"build:h5": "taro build --type h5",
"build:rn": "taro build --type rn",
"build:qq": "taro build --type qq",
"build:jd": "taro build --type jd",
"build:quickapp": "taro build --type quickapp",

3. 解决问题 配置不同的outputRoot的值 3.1 方法一：配置一个生产目录文件夹对象

/config/dev.js

const outputRootFolder = {
	weapp: 'dist_weapp',
	swan: 'dist_swan',
	alipay: 'dist_alipay',
	tt: 'dist_tt',
	h5: 'dist_h5',
	rn: 'dist_rn',
	qq: 'dist_qq',
	jd: 'dist_jd',
	quickapp: 'dist_quickapp',
}
const env = JSON.parse(process.env.npm_config_argv)['cooked'][1].split(':')[1]
const config = {
	...
	outputRoot: outputRootFolder[env]
}

3.2 方法优缺点 优点：目录配置比较灵活，可以配置不同文件名，文件名可以没有规则；缺点：添加代码较多，需要新加变量保存文件夹路径。 3.3 方法二：直接配置config有规则文件夹名

/config/dev.js

const env = JSON.parse(process.env.npm_config_argv)['cooked'][1].split(':')[1]
const config = {
	...
	outputRoot: `dist/dist_${env}`
}

3.4 方法优缺点 优点：代码简单快捷，只需要获取环境 env；缺点：生成的目录名称固定，按照规则不变。 4. 总结 个人比较推荐使用第二种，将所有生产目录都放到dist文件下，不同的版本，名字不同，但是有规则，一目明了！这样能够解决跨平台程序同时调试，互不冲突！ WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！ 下载

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表