前言

目前市面上的主流应用都在逐渐支持小程序，比如小红书，快手，抖音，微信，支付宝...，而一些产品为了争夺市场，小程序的阵地上不可失去的，而为了保证一次开发，多平台使用，目前有两种小程序的多平台方案，uni-app 与 Taro

开发者可以根据团队的情况以及产品的需求，来选择适合跨端框架，而本文将从 Taro 入手，搭建工程，学习 Taro 原理，增强跨端开发能力。

Taro 的本质

Taro 提供了一个脚手架来支持我们进行项目创建 npm install -g @tarojs/cli，我们将它装到全局内，然后在终端输入Taro -v，查看安装的 Taro 脚手架的版本号，说明安装成功，再通过脚手架创建一个基础的项目模版

taro init taro-project

它提供了一些选型，选择你的语言，CSS 预处理器等等

我们把目光转到这个模版的package.json的依赖上

// dependencies
"@tarojs/components": "3.6.16",
"@tarojs/plugin-platform-platform": "3.6.16", // 各个平台的依赖插件如：tt, weapp
"@tarojs/runtime": "3.6.16",
"@tarojs/shared": "3.6.16",
"@tarojs/taro": "3.6.16",
"@tarojs/plugin-framework-react": "3.6.16",
// devDependencies
"@tarojs/cli": "3.6.16",
"@tarojs/taro-loader": "3.6.16",

我们会发现 Taro 的脚手架创建的模版引入了很多 @taro/的包，每个包的作用都体现在了 Taro 的文档里，比如@tarojs/components，它是 Taro 的组件库，那真么多的依赖，他的仓库都是分开的吗？

很明显是一个 Monorepo 结构的项目，所以每个模块各司其职，互不影响，自由度很大，下面列举一下常见 Taro 模块的作用，诸如上面项目模版内的依赖

• @tarojs/components：Taro 组件库
• @tarojs/runtime：Taro 运行时，来支持 React/Vue 直接运行在小程序端
• @tarojs/taro：抛出给开发者的核心 API，import Taro from '@tarojs/taro'
• @tarojs/cli：Taro 命令行工具，内置命令，打包等操作
• @tarojs/taro-loader：自定义的 Webpack loader

而这些依赖也是分门别类的，比如@tarojs/taro-loader与@tarojs/cli是 Taro 的编译时依赖，而其他三个则是运行时，这也是 Taro 编译时+运行时的基础，对没错，和 Vue.js 的设计方式是相同的，那么具体的编译时和运行时又是如何呢？

当我们执行taro build时，会触发 Taro 的编译时，根据我们的编译配置即在项目目录下config内，走 Webpack 的编译流程，其中当然包括了插件和 loader 的注入如 taro-loader，此阶段为编译时

多平台编译

我们的目标是可以支持到主流的小程序平台内，而 Taro 支持了大部分主流小程序插件，选择平台需要根据文档来操作，一些插件是在项目模版内置了，部分平台如：小红书，快手，需要手动安装配置

npm install @tarojs/plugin-platform-kwai 
npm install @tarojs/plugin-platform-xhs

// config/index.js
const config = {
 ?// ...
 ?plugins: [
 ? ? ?'@tarojs/plugin-platform-kwai',
 ? ? ?'@tarojs/plugin-platform-xhs'
 ?  ],
 ?// ...
}

配置打包命令

"dev:weapp": "taro build --type weapp --watch",
"build:weapp": "taro build --type weapp",

如果我们需要同时调试开发多个平台，那么我建议你配置一下打包路径，Taro 支持使用process.env.TARO_ENV访问当前打包的属性，所以你这样配置

// config/index.js
const config = {
 ?// ...
 ?outputRoot: `dist/${process.env.TARO_ENV}_dist`
 ?// ...
}

除此之外，每个小程序平台都需要有专属的配置文件，项目默认有project.config.json，它是微信小程序的配置文件，我们可以在内设置开发 appid，开发配置等信息，常用开发信息包括

• 拦截不合法域名开关
• ES6 转 ES5 开关
• 代码压缩开关

如果我们需要更改配置建议直接写到配置文件内，而不是在开发平台上手动配置，因为每次编译以 Taro 代码配置为准，会自动更改开发平台的配置

构建加速

在我们平时使用 Webpack 进行打包时经常会用到两个 loader，cache-loader与 thread-loader

• cache-loader：持久化缓存
• thread-loader：将 loader 运行在独立的线程池内运行

而 Taro 社区内开源了
taro-plugin-compiler-optimization插件，该插件依赖于上面两个插件，在配置文件内以插件形式引入即可

const config = {
 ?// ...
    plugins: [
 ? ? ?'taro-plugin-compiler-optimization',
 ?  ],
 ?// ...
}

内部的机制是将耗时严重的 loader 放在 thread-loader 后，放置在单独的线程池运行，实现并行

小程序持续集成

小程序每次进行体验测试都需要管理员去 pc 平台进行手动点击上传代码，再将体验二维码发送给测试，为了减少这个步骤，可以在小程序内配置持续集成

CI 插件

CI 即持续集成，开发人员快速迭代的同时，产物也会持续在体验版本上，而 Taro 基于微信团队的微信小程序持续集成工具，开源了 @tarojs/plugin-mini-ci

安装插件:

yarn add @tarojs/plugin-mini-ci --dev
npm install @tarojs/plugin-mini-ci -D

配置平台校验字段，不同平台要求字段不同，目前支持微信，字节，百度，支付宝小程序，具体可以在 Taro 文档内查看，下面以抖音小程序为例

// config/index.js
const CIpluginOpt = {
 ?tt: {
 ? ?email: 'xxxx@163.com',
 ? ?password: 'xxxx',
  }
}

在 Taro 配置文件内引入插件，传递平台校验参数

// config/index.js
const config = {
 ?plugins: [['@tarojs/plugin-mini-ci', CIPluginFn]],
}

配置上传命令

"build:tt:upload": "taro upload --type tt --projectPath dist/tt_dist"

--projectPath 为上传指定路径，--type 指定上传平台，这里上传平台完成，后续对群聊机器人进行配置

配置群聊机器人

CI 插件提供了钩子函数的机制，当上传平台成功后，可以触发钩子函数，钩子函数，我们可以单独在配置目录下编写

// config/test.js
module.exports = function (ctx) {
 ?ctx.register({
 ? ?name: 'onPreviewComplete',
 ? ?fn: ({ success, data, error }) => {
 ? ? ?console.log('接收预览后数据', success, data, error)
 ?  },
  })
 ?ctx.register({
 ? ?name: 'onUploadComplete',
 ? ?fn: async ({ success, data, error }) => {
 ? ? ?console.log('接收上传后数据', success, data, error)
 ?  },
  })
}

编写后可以将函数引入到编译配置文件内，作为插件注入

const config = {
 ?plugins: [['@tarojs/plugin-mini-ci', CIPluginFn]],
 ?require('path').join(__dirname, './test'),
}

一般上传数据包括了体验二维码，小程序版本等信息，而机器人根据你的需求，选择钉钉，企业微信等等

Taro 多平台小程序实践-工程搭建
原文链接：
https://juejin.cn/post/7289709491465371684