react+taro打包到不同小程序

浩星2025-08-26 6:05

前言：

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 里的配置

javascript 复制代码

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文件中得命令也要改变

javascript 复制代码

"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",
  // 其他平台和环境类似...
}