Taro 编译分为 dev 和 build 模式

编译运行#
使用 Taro 的 build 命令可以把 Taro 代码编译成不同端的代码,然后在对应的开发工具中查看效果。

Taro 编译分为 dev 和 build 模式:

dev 模式(增加 –watch 参数) 将会监听文件修改。
build 模式(去掉 –watch 参数) 将不会监听文件修改,并会对代码进行压缩打包。
dev 模式生成的文件较大,设置环境变量 NODE_ENV 为 production 可以开启压缩,方便预览,但编译速度会下降。
微信小程序#
编译命令#
# yarn
$ yarn dev:weapp
$ yarn build:weapp

# npm script
$ npm run dev:weapp
$ npm run build:weapp

# 仅限全局安装
$ taro build –type weapp –watch
$ taro build –type weapp

# npx 用户也可以使用
$ npx taro build –type weapp –watch
$ npx taro build –type weapp

# watch 同时开启压缩
$ set NODE_ENV=production && taro build –type weapp –watch # Windows
$ NODE_ENV=production taro build –type weapp –watch # Mac
小程序开发者工具#
下载并打开微信开发者工具,然后选择项目根目录进行预览。

需要注意开发者工具的项目设置:

需要设置关闭 ES6 转 ES5 功能,开启可能报错
需要设置关闭上传代码时样式自动补全,开启可能报错
需要设置关闭代码压缩上传,开启可能报错
百度小程序#
编译命令#
# yarn
$ yarn dev:swan
$ yarn build:swan

# npm script
$ npm run dev:swan
$ npm run build:swan

# 仅限全局安装
$ taro build –type swan –watch
$ taro build –type swan

# npx 用户也可以使用
$ npx taro build –type swan –watch
$ npx taro build –type swan

# watch 同时开启压缩
$ set NODE_ENV=production && taro build –type swan –watch # Windows
$ NODE_ENV=production taro build –type swan –watch # Mac
小程序开发者工具#
下载并打开百度开发者工具,并确保已经设置了小程序项目配置文件 project.swan.json。然后选择项目根目录下 dist 目录(根目录 config 中的 outputRoot 设置的目录)进行预览。

需要注意开发者工具的项目设置:

需要关闭 ES6 转 ES5 功能,开启可能报错
需要关闭上传代码时样式自动补全,开启可能报错
需要关闭代码压缩上传,开启可能报错
支付宝小程序#
编译命令#
# yarn
$ yarn dev:alipay
$ yarn build:alipay

# npm script
$ npm run dev:alipay
$ npm run build:alipay

# 仅限全局安装
$ taro build –type alipay –watch
$ taro build –type alipay

# npx 用户也可以使用
$ npx taro build –type alipay –watch
$ npx taro build –type alipay

# watch 同时开启压缩
$ set NODE_ENV=production && taro build –type alipay –watch # Windows
$ NODE_ENV=production taro build –type alipay –watch # Mac
小程序开发者工具#
下载并打开支付宝小程序开发者工具,然后选择项目根目录下 dist 目录(根目录 config 中的 outputRoot 设置的目录)进行预览。

需要注意开发者工具的项目设置:

需要关闭 ES6 转 ES5 功能,开启可能报错
需要关闭上传代码时样式自动补全,开启可能报错
需要关闭代码压缩上传,开启可能报错
字节跳动小程序#
编译命令#
# yarn
$ yarn dev:tt
$ yarn build:tt

# npm script
$ npm run dev:tt
$ npm run build:tt

# 仅限全局安装
$ taro build –type tt –watch
$ taro build –type tt

# npx 用户也可以使用
$ npx taro build –type tt –watch
$ npx taro build –type tt

# watch 同时开启压缩
$ set NODE_ENV=production && taro build –type tt –watch # Windows
$ NODE_ENV=production taro build –type tt –watch # Mac
小程序开发者工具#
下载并打开字节跳动小程序开发者工具,并确保已经设置了小程序项目配置文件 project.tt.json。然后选择项目根目录下 dist 目录(根目录 config 中的 outputRoot 设置的目录)进行预览。

需要注意开发者工具的项目设置:

需要关闭 ES6 转 ES5 功能,开启可能报错
需要关闭上传代码时样式自动补全,开启可能报错
需要关闭代码压缩上传,开启可能报错
QQ 小程序#
编译命令#
# yarn
$ yarn dev:qq
$ yarn build:qq

# npm script
$ npm run dev:qq
$ npm run build:qq

# 仅限全局安装
$ taro build –type qq –watch
$ taro build –type qq

# npx 用户也可以使用
$ npx taro build –type qq –watch
$ npx taro build –type qq

# watch 同时开启压缩
$ set NODE_ENV=production && taro build –type qq –watch # Windows
$ NODE_ENV=production taro build –type qq –watch # Mac
小程序开发者工具#
下载并打开 QQ 小程序开发者工具,然后选择项目根目录下 dist 目录(根目录 config 中的 outputRoot 设置的目录)进行预览。

需要注意开发者工具的项目设置:

需要关闭 ES6 转 ES5 功能,开启可能报错
需要关闭上传代码时样式自动补全,开启可能报错
需要关闭代码压缩上传,开启可能报错
京东小程序#
编译命令#
# yarn
$ yarn dev:jd
$ yarn build:jd

# npm script
$ npm run dev:jd
$ npm run build:jd

# 仅限全局安装
$ taro build –type jd –watch
$ taro build –type jd

# npx 用户也可以使用
$ npx taro build –type jd –watch
$ npx taro build –type jd

# watch 同时开启压缩
$ set NODE_ENV=production && taro build –type jd –watch # Windows
$ NODE_ENV=production taro build –type jd –watch # Mac
小程序开发者工具#
下载并打开京东小程序开发者工具(前往https://mp.jd.com 注册,申请成功后将会获得开发者工具),然后选择项目根目录下 dist 目录(根目录 config 中的 outputRoot 设置的目录)进行预览。

需要注意开发者工具的项目设置:

需要关闭 ES6 转 ES5 功能,开启可能报错
需要关闭上传代码时样式自动补全,开启可能报错
需要关闭代码压缩上传,开启可能报错
京东小程序相关阅读#
《使用 Taro 快速开发京东小程序》
《京东小程序 Taro 开发对比原生开发测评》
企业微信小程序#
Taro v3.1+ 开始支持

使用 Taro 插件能支持编译企业微信小程序,插件文档请看 Github。

安装插件#
yarn add @tarojs/plugin-platform-weapp-qy
配置插件#
Taro 项目配置
config = {
// …
plugins: [
‘@tarojs/plugin-platform-weapp-qy’
]
}
编译命令#
# yarn
$ yarn dev:qywx
$ yarn build:qywx

# npm script
$ npm run dev:qywx
$ npm run build:qywx

# 仅限全局安装
$ taro build –type qywx –watch
$ taro build –type qywx

# npx 用户也可以使用
$ npx taro build –type qywx –watch
$ npx taro build –type qywx

# watch 同时开启压缩
$ set NODE_ENV=production && taro build –type qywx –watch # Windows
$ NODE_ENV=production taro build –type qywx –watch # Mac
小程序开发者工具#
同微信小程序。开发者工具的编译模式设置为企业微信。

钉钉小程序#
Taro v3.1+ 开始支持

使用 Taro 插件能支持编译钉钉小程序,插件文档请看 Github。

安装插件#
yarn add @tarojs/plugin-platform-alipay-dd
配置插件#
Taro 项目配置
config = {
// …
plugins: [
‘@tarojs/plugin-platform-alipay-dd’
]
}
编译命令#
# yarn
$ yarn dev:dd
$ yarn build:dd

# npm script
$ npm run dev:dd
$ npm run build:dd

# 仅限全局安装
$ taro build –type dd –watch
$ taro build –type dd

# npx 用户也可以使用
$ npx taro build –type dd –watch
$ npx taro build –type dd

# watch 同时开启压缩
$ set NODE_ENV=production && taro build –type dd –watch # Windows
$ NODE_ENV=production taro build –type dd –watch # Mac
小程序开发者工具#
同支付宝小程序。开发者工具的编译模式设置为钉钉。

支付宝 IOT 小程序#
Taro v3.1+ 开始支持

使用 Taro 插件能支持编译支付宝 IOT 小程序,插件文档请看 Github。

安装插件#
yarn add @tarojs/plugin-platform-alipay-iot
配置插件#
Taro 项目配置
config = {
// …
plugins: [
‘@tarojs/plugin-platform-alipay-iot’
]
}
编译命令#
# yarn
$ yarn dev:iot
$ yarn build:iot

# npm script
$ npm run dev:iot
$ npm run build:iot

# 仅限全局安装
$ taro build –type iot –watch
$ taro build –type iot

# npx 用户也可以使用
$ npx taro build –type iot –watch
$ npx taro build –type iot

# watch 同时开启压缩
$ set NODE_ENV=production && taro build –type iot –watch # Windows
$ NODE_ENV=production taro build –type iot –watch # Mac
小程序开发者工具#
同支付宝小程序。开发者工具的编译模式设置为 IOT 小程序。

H5#
编译命令#
# yarn
$ yarn dev:h5
$ yarn build:h5

# npm script
$ npm run dev:h5
$ npm run build:h5

# 仅限全局安装
$ taro build –type h5 –watch
$ taro build –type h5

# npx 用户也可以使用
$ npx taro build –type h5 –watch
$ npx taro build –type h5

转载请注明出处:https://www.onexin.net/taro-dev-build/

相关文章:

1、Taro 架构编译时和运行时
https://www.onexin.net/taro-complier-and-runtime/

2、Taro开放式跨端跨框架环境安装及使用
https://www.onexin.net/taro-installation-and-use/

Leave a Reply