【taro react】 ---- 项目打包生成不同目录【代码编译到不同生产目录】
【taro react】 ---- 项目打包生成不同目录【代码编译到不同生产目录】
Rattenking
发布于 2022-05-11 08:51:08
发布于 2022-05-11 08:51:08
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文件下，不同的版本，名字不同，但是有规则，一目明了！
- 这样能够解决跨平台程序同时调试，互不冲突！
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-05-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录