react+taro打包到不同小程序

前言：

        taro是和uniapp一样的夸端工具，主要基于react来实现，这里说一说如何来打包到不同品牌的小程序。

具体区别：

针对不同小程序，主要就是打包命令不同

目标平台	打包命令	输出目录	说明
微信小程序	npm run build:weapp	dist/weapp	需安装 @tarojs/plugin-platform-weapp 插件
支付宝小程序	npm run build:alipay	dist/alipay
百度小程序	npm run build:swan	dist/swan
字节跳动小程序	npm run build:tt	dist/tt
QQ 小程序	npm run build:qq	dist/qq
京东小程序	npm run build:jd	dist/jd
H5	npm run build:h5	dist/h5
React Native	npm run build:rn	build/rn

具体打包：

Taro 通过 --type 参数指定目标平台，配合 config/index.js 中的配置和环境变量

1、config/index.js 里的配置

module.exports = {// 项目名称projectName: 'myApp',// 输出根目录，使用环境变量区分平台outputRoot: `dist/${process.env.TARO_ENV}`,// 微信小程序特定配置weapp: {postcss: {autoprefixer: { enable: true },pxtransform: { enable: true }}},// H5 特定配置h5: {publicPath: '/',staticDirectory: 'static',// 其他H5 webpack配置...}
}

2、如果多环境打包，比如分dev,test等，可以用cross-env

npm install cross-env

// config/index.js
module.exports = function (merge) {// 基础配置const baseConfig = {// ... 你的基础配置};// 根据 process.env.NODE_ENV 加载不同环境的配置并合并if (process.env.NODE_ENV === 'dev') {return merge({}, baseConfig, require('./dev'));}if (process.env.NODE_ENV === 'test') {return merge({}, baseConfig, require('./test'));}return merge({}, baseConfig, require('./prod'));
}

pack.json文件中得命令也要改变

"scripts": {"build:weapp:dev": "cross-env NODE_ENV=dev taro build --type weapp","build:weapp:test": "cross-env NODE_ENV=test taro build --type weapp","build:weapp:prod": "cross-env NODE_ENV=prod taro build --type weapp","dev:weapp": "cross-env NODE_ENV=dev taro build --type weapp --watch",// 其他平台和环境类似...
}