跳到主要内容

Taro v3.5 正式发布：开发体验提升

· 阅读需 13 分钟
zhiqingchen
Cong-Cong Pan
Flame
JJ
TJ

距离 Taro 3.5 的 Beta 版本发布已有两个月的时间，期间我们在不断地对基于 Webpack5 的编译系统、基于 Next.js 的 SSR 等功能进行打磨的同时，新增了对 pnpm 的支持等新功能。此外 Taro 社区也有很多同学参与共建，如 Taro 合作者 @biorz 为 ReactNative 侧贡献了重要特性：支持把 Taro 组件编译为 RN 组件。

日前 Taro v3.5 已正式发布，下文将介绍关于 3.5 的主要特性与重要修复，以及后续的版本规划。

一、编译提速​

Taro v3.5 基于 Webpack5 构建了新的编译系统，利用持久化缓存、依赖预编译、SWC 等方法与工具，大幅降低了编译所需耗时。开发者可以自由选择切换使用 Webpack5 进行编译，也可以继续保持使用 Webpack4，另外在 v3.6 中 Taro 还将支持使用 Vite 进行编译。

依赖预编译可以预先把项目的第三方依赖打包为一个模块联邦 remote 应用，再次编译时 Webpack 无需再对这些依赖进行编译，从而提升编译速度。关于 Webpack5 编译系统的实现细节，请浏览 《Taro v3.5 beta 编译提速》

v3.5 Beta 发布后，我们补全了 H5 端的依赖预编译功能，并且把依赖预编译作为一个通用能力提取了出来。可供 Taro 以外的使用 Webpack5 的 H5 项目使用，通过 @tarojs/webpack5-prebundle 进行编译提速，具体使用方法可参考相关文档。

提速效果​

以 NutUI 组件示例库 为例，小程序、H5 端的编译速度测试结果如下：

小程序：

GroupBar-20220725.jpeg

H5：

GroupBar-20220725 (1).jpeg

使用方法

简单修改 Taro 的编译配置即可切换使用 Webpack4 或 Webpack5 进行编译：

/** config/index.js */
const config = {
  // 自定义编译工具，可选 'Webpack4' 或 'Webpack5'
  compiler: 'webpack4' || 'webpack5',
}

二、RN​

1. React Native 0.68 版本支持​

React Native 0.68 版本已于 2022-3-30 正式发布。0.68 是首个可选接入 New Architecture 的版本，新架构有望为 RN 带来性能和体验上的飞跃。Taro 默认选择的 RN 版本，正式切换到了 0.68，开发者通过 taro init 选择 react-native 模板即可。

另外 0.69 版本的适配，也在进展中。

2. RN 相关依赖库由 unimodules 升级至 expo​

Expo 是 React Native 生态中的重要角色，提供了非常多优秀的模块，在 Taro 中有较为广泛的使用，如 expo-av、expo-camera 等，将来我们还会持续接入新的模块。Expo 的模块系统，由 unimodules 变更为 expo 已有一段时日，其架构变更原因可参考文章： What’s new in Expo modules infrastructure。

Taro v3.5 及以后将使用新的模块系统，后续壳工程不再包含 unimodules 版本。旧版本升级可参考此 PR，升级过程较为繁琐，建议重新 init 一个仓库，再将业务改动同步。升级为 expo 后，不再支持 iOS 11，详细内容请参考 discussions。

3. 支持把 Taro 组件编译为 React Native 组件​

如果您想在现存的 React Native 项目中(非 Taro RN )，复用您的 Taro 组件，那么这个新功能或许适合您。

您可以使用以下命令编译组件，编译后的组件产物可以直接在 React Native 项目中使用。 详细内容请参考 discussions。

taro build native-components --type rn

4. 编译打包方案优化​

Android 的打包过程，从调用 gradlew 改为使用  fastlane，将打包过程配置化，尽可能地减少对 RN 初始化后原生代码的入侵。相关配置位于  android/fastlane，目前仅做了基础配置，开发者可进一步自定义。

刚接触 Taro 开发 APP 的开发者，经常在开发环境的配置上，消耗大量时间。再次建议大家先学习利用 GitHub Action 进行打包编译，相关代码位于 .github 目录中。

5. 调试工具 Taro Playground 升级至 Taro 3.5 版本及 React Native 0.68​

Taro Playground 作为 Taro RN 端的调试工具及跨端 Demo，进行了同步更新。此次更新无法保证向下兼容，使用旧版本 Taro 的开发者，如需调试 Android，可在 releases 中下载旧包进行调试。在 App Store 中，我们只上架最新版本，需要旧版本的开发者请不要开启应用自动更新。如不慎升级，需自行打包编译，或联系我们加入测试组。

6. 壳工程代码整理​

对于 0.68 版本的壳工程，我们进行了代码的重新整理。将初始化 RN、安装 expo、兼容 Taro、安装依赖、添加 Github Action，每一个步骤一一列出，方便开发者在定制壳工程时进行参考。

三、pnpm​

众所周知，pnpm 在当下被誉为“最先进的包管理工具”，它是由 npm/yarn 衍生而来，解决了 npm/yarn 内部潜在的 bug，极大的优化了性能，扩展了使用场景。在社区内很高的呼声下，Taro 也在提供了这一热门的包管理工具选项。

在 Taro v3.5 版本以后，在脚手架内置包管理工具不再自动识别本地环境内安装的包管理工具，而是需要开发者自行选择需要的包管理工具，供开发者更方便使用和操作。

? 请选择包管理工具 (Use arrow keys)
❯ yarn
  pnpm
  npm
  cnpm

如果是在较旧的 Taro 项目中，想使用 pnpm 管理工具，由于幽灵依赖的存在，开发者需要在项目中手动安装并升级依赖来修复该问题，具体操作可参考文中升级指南第 5 项。

四、其它特性​

除了以上新特性外，v3.5 还包括很多重要的更新：

1. 适配 React 18​

从 Taro v3.5 开始，Taro 将默认使用 React 18 版本。你可以在 Taro 使用 React18 中激动人心的新特性了。从新建项目开始探索吧：

# @tarojs/cli 升级到 v3.5
$ taro init myProject
# 选择「react」框架

需要注意的是，受小程序环境限制，诸如新 Suspense 特性将不能在小程序中使用，详情请浏览文档。

2. H5 支持服务端渲染​

通过 tarojs-plugin-platform-nextjs 插件配置，我们可以将 Taro 和 nextjs 社区生态打通，让 Taro H5 支持 Pre-rendering（预渲染）、SSR（服务端渲染）和 ISR（增量静态生成）各种特性，提升页面首屏渲染速度 🚀，也利于 SEO 优化 🔍。

npm install tarojs-plugin-platform-nextjs next

在 Taro 项目的  config/index.js 中添加插件。

const config = {
  plugins: ['tarojs-plugin-platform-nextjs'],
}

启动项目。

npx taro build --type nextjs --watch

插件来自社区大佬 @SyMind 贡献，详细用法可以参考插件文档。

3. H5 支持多页应用模式​

H5 端的多页应用模式是社区呼声最高的若干特性之一，在新版本中将得到支持，详细用法及注意事项请参考文档。

配置开启多页应用模式：

/** config/index.js */
const config = {
  h5: {
    router: {
      mode: 'multi',
    },
  },
}

4. 补全对小程序生命周期方法的支持​

过去 Taro 对于小程序常用的生命周期方法支持得不够完整，新版本中将补全对应的方法与钩子。

新增 App 生命周期：

  • onError（React & Vue3）

新增钩子：

  • useLaunch（React）
  • useError（React）
  • usePageNotFound（React）
  • useLoad（React & Vue3）
  • useUnload（React & Vue3）
  • useSaveExitState（React & Vue3）

5. 小程序内部实现优化​

对小程序的内部实现进行优化，减少约 50k 包体积，同时降低内存占用，减少 setData 发送的数据量。

五、升级指南​

1. 升级 Taro CLI​

升级全局的 Taro CLI：

npm i -g @tarojs/cli

或升级本地的 Taro CLI 工具：

npm i @tarojs/cli

2. 更新项目依赖​

如果依赖安装失败或安装成功却运行报错，可以尝试删除 node_modules、yarn.lock、package-lock.json、pnpm-lock.yaml 后重新安装依赖。

2.1 更新项目内的 Taro 相关依赖​

把 package.json 中 Taro 相关依赖的版本修改为 3.5.0 后重新安装依赖。

2.2 使用 React 的项目​

  • 【Breaking】使用 React 的项目需要额外安装 @pmmmwh/react-refresh-webpack-plugin 和 react-refresh：
npm i @pmmmwh/react-refresh-webpack-plugin react-refresh --save-dev

2.3 使用 Preact 的项目​

  • 【Breaking】使用 Preact 的项目需要额外安装 @prefresh/webpack 和 @prefresh/babel-plugin：
npm i @prefresh/webpack @prefresh/babel-plugin --save-dev

2.4 使用 Vue2 的项目​

  • 【Breaking】使用 Vue2 的项目需要额外安装 @vue/babel-preset-jsx：
npm i @vue/babel-preset-jsx --save-dev

2.5 使用 Vue3 的项目​

  • 【Breaking】使用 Vue3 的项目需要额外安装 @vue/babel-plugin-jsx：
npm i @vue/babel-plugin-jsx --save-dev

3. 使用 Webpack5​

开发者需要先卸载 @tarojs/mini-runner 和 @tarojs/webpack-runner：

npm uninstall @tarojs/mini-runner @tarojs/webpack-runner

然后安装 @tarojs/webpack5-runner：

npm install @tarojs/webpack5-runner

最后修改 Taro 编译配置即可：

/** config/index.js */
const config = {
  compiler: 'webpack5',
}

4. 使用 React 18​

需要更新 react、react-dom、@types/react 的版本：

npm i react react-dom
npm i @types/react --save-dev

5. 使用 pnpm​

因为 pnpm 不允许幽灵依赖的存在，因此开发者需要在项目中手动安装下列依赖：

dependencies 补充依赖：

"@tarojs/helper": "3.5.0",
"@tarojs/plugin-platform-weapp": "3.5.0",
"@tarojs/plugin-platform-alipay": "3.5.0",
"@tarojs/plugin-platform-tt": "3.5.0",
"@tarojs/plugin-platform-swan": "3.5.0",
"@tarojs/plugin-platform-jd": "3.5.0",
"@tarojs/plugin-platform-qq": "3.5.0",
"@tarojs/router": "3.5.0",
"@tarojs/shared": "3.5.0",
"@tarojs/taro-h5": "3.5.0",

devDependencies 补充依赖：

安装项目对应的 Webpack 版本，如 Webpack5：

"webpack": "^5.73.0"

六、最后​

下半年 Taro 团队的核心将围绕以下各方向展开：

  • 支持使用 Vite 进行编译（预计 Q3 推出 alpha 版本）
  • 小程序方面将持续对性能进行优化、支持更多的 React/Vue 特性（如 Portal）和生态库（如 React/Vue Router）。
  • H5 方面将输出适配 Vue3 的 SSR 方案。
  • RN 方面将深入探索高阶功能，如地图、动画、2D 及 3D 图形方案，并推出跨端可视化库，提升 Taro 跨端能力。
  • 此外还会探索对于 Flutter 的适配。

最后的最后，衷心感谢参与社区共建与交流的各位同学！上半年我们制定了开发者贡献制度，建立起规范的项目分工与有效的荣誉激励机制。未来 Taro 将积极探寻更中立与开放的开源治理机制，欢迎各位开发者参与到 Taro 社区的建设中~