青岛设计网站的公司湖北网络推广
前言：
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",// 其他平台和环境类似...
}