Taro 正式发布 3.1 版本

2021年3月10日 · 阅读需 10 分钟

Taro 技术委员会成员、Taro Core 工作组 Owner

自 Taro 3.1 体验版推出后，我们不断地根据社区的反馈意见对 3.1 版本进行打磨。主要改进了开放式架构、引入了 CustomWrapper 组件以解决性能问题、提出了原生小程序渐进式混合使用 Taro 的解决方案。

经历了 12 个 beta 版本后，终于迎来了 3.1 正式版 🎉

一、Highlights

1. 开放式架构

近年来业界推出的小程序平台越来越多，但 Taro 核心维护的平台只有 6 个，因此常常有同学提出能不能支持某某平台的 Feature Request。

基于目前的架构，支持一个新的平台开发复杂度高，同时社区也难以参与贡献。

为此我们把 Taro 打造成为一个开放式框架，通过端平台插件能支持任意小程序平台：

插件开发者无需修改 Taro 项目源码，即可编写出一个端平台插件。
插件使用者只需安装、配置端平台插件，即可把代码编译到指定平台。

基于开放式架构，我们新增了一些有趣的插件，也十分期待大家利用它施展创意。

新增的插件：

插件	功能
@tarojs/plugin-platform-weapp-qy	编译企业微信小程序
@tarojs/plugin-platform-alipay-dd	编译钉钉小程序
@tarojs/plugin-platform-alipay-iot	编译支付宝 IOT 小程序
@tarojs/plugin-inject	为所有小程序平台快速新增 API、组件，调整组件属性等

2. 新增小程序性能优化组件 CustomWrapper

Taro3 使用 <template> 进行渲染，所有的 setData 都由页面对象调用。如果页面结构比较复杂，应用更新的性能就会下降。

为此我们引入了一个基础组件 CustomWrapper，它的作用是创建一个原生自定义组件。对后代节点的 setData 将由此自定义组件进行调用，达到局部更新的效果，从而提升更新性能。

开发者可以使用 CustomWrapper 去包裹遇到更新性能问题的组件：

<CustomWrapper>
  <GoodsList>
    <Item />
    <Item />
    // ...
  </GoodsList>
</CustomWrapper>

更详细的性能优化原理请见《Taro 助力京喜拼拼项目性能体验优化》

3. 原生小程序渐进式混合使用 Taro 开发

过去我们对在 Taro 项目中混合使用原生的支持度较高。相反地，对在原生项目中混合使用 Taro 却没有太重视。但是市面上有着存量的原生开发小程序，他们接入 Taro 开发的改造成本往往非常大，最后只得放弃混合开发的想法。

经过与京喜拼拼项目的合作，也驱使了我们更加关注这部分需求。Taro 推出了一套完整的原生项目混合使用 Taro 的方案。

方案主要支持了三种场景：

在原生项目中使用 Taro 开发的页面。（已完成）
在原生项目的分包中运行完整的 Taro 项目。（已完成）
在原生项目中使用 Taro 开发的自定义组件。（将在 v3.1.3 版本中支持）

希望以上方案能满足打算逐步接入 Taro 开发的同学。更多意见也欢迎在 Github 上给我们留言。

4. 拥抱 React 17、TypeScript 4

4.1. 使用方法

新项目：

模板默认依赖 React 17、TypeScript 4，可以直接使用。

旧项目：

手动升级项目依赖：

react: ^17.0.0
react-dom: ^17.0.0
typescript: ^4.1.0
@typescript-eslint/parser: ^4.15.1
@typescript-eslint/eslint-plugin: ^4.15.1

设置 ESLint 配置：

// .eslintrc
module.exports = {
  extends: ['taro/react'],
  rules: {
    'react/jsx-uses-react': 'off',
    'react/react-in-jsx-scope': 'off',
  },
}

4.2. React 默认支持 New JSX Transform

New JSX Transform 让开发者不再需要在书写 JSX 前先引入 React。

如果不希望打开此功能，可以修改 Babel 配置的 reactJsxRuntime 选项为 classes：

// babel.config.js
module.exports = {
  presets: [
    [
      'taro',
      {
        framework: 'react',
        ts: true,
        reactJsxRuntime: 'classes',
      },
    ],
  ],
}

4.3. React H5 端默认开启 fast-refresh

如果不希望打开此功能，可以修改 Taro 配置和 Babel 配置：

// config/index.js
const config = {
  h5: {
    devServer: {
      hot: false,
    },
  },
}

// babel.config.js
module.exports = {
  presets: [
    [
      'taro',
      {
        framework: 'react',
        ts: true,
        hot: false,
      },
    ],
  ],
}

二、Breakings

1. React

项目的 React 版本必须 >= 16.14.0，或使用 17.0.0+

2. Vue2

修复 Vue2 入口组件生命周期多次触发的问题，#7179

用户编写的入口组件需要修改如下：

// app.js

// 3.0 中需要创建 Vue 对象
const App = new Vue({})

// 3.1 中只需要返回对象字面量
const App = {}

3. Linaria

使用 Linaria 时，需要修改 linaria.config.js 的内容。

linaria.config.js
module.exports = {
  rules: [
    {
      action: require('linaria/evaluators').shaker,
    },
    {
      // 此处的正则有改变
      test: /node_modules[\/\\](?!@tarojs)/,
      action: 'ignore',
    },
  ],
}

三、特性

组件 View 增加 catchMove 属性，解决滚动穿透问题。
同步所有内置小程序官方最新的 API、组件能力。

四、问题修复

1. 重要

修复百度小程序渲染问题，#7293。
修复、增强微信小程序转换为 Taro 的能力。
优化打包体积。
支付宝小程序支持引用自定义组件。
修复小程序分享 API 在使用 redux 时无法生效的问题，#7232。

2. 小程序

修复多端文件没按照 Webpack extension 配置解析的问题，#6786，#7265 。
修复 style 属性设置失败的问题，#8678。

3. H5

修复 H5 端 HMR 失效的问题。
支持路由 404 时触发 App.onPageNotFound，#7474。
修复表单组件 slot 兼容问题，#7363。
修复 View 和 Text 组件多行截断样式失败问题，#7472 #6741。
组件的 style 属性支持设置 CSS 变量，#7452。

五、升级指南

从 v2.x 升级的同学需要先按迁移指南进行操作。

从 v3.x 升级的同学，首先需要安装 v3.1 的 CLI 工具：

npm i -g @tarojs/cli

然后进入项目，删除 node_modules、yarn.lock、package-lock.json。

最后把 package.json 文件中 Taro 相关依赖的版本修改为 ^3.1.0，再重新安装依赖。至此升级结束。

六、未来规划

得益于 58 技术团队的全力支持，Taro 3 即将支持 React Native，现已推出 3.2.0 的 Beta 版本，3.2.0 正式版将于本月底推出。欢迎抢先体验：《增加 React Native 支持的 Taro 3.2.0 版本测试通告》

七、感谢

开源不易，贵在坚持。Taro 团队衷心感谢各位参与过本项目开源建设的朋友，无论是为 Taro 提交过代码、建设周边生态，还是反馈过问题，甚至只是茶余饭后讨论、吐槽 Taro 的各位。

现诚挚邀请您与 Taro 官方团队交流您的使用情况，有你相伴，Taro 更加精彩！问卷地址

最后，特别感谢为 Taro 从 v3.0 走到 v3.1 贡献过代码的各位同学，不分先后：

@wuchangming
@SyMind
@zhuxianguo
@Songkeys
@vdfor
@ZeroTo0ne
@zhaoguoweiLLHC
@Spencer17x
@wingsico
@w91
@fjc0k
@Leechael
@southorange1228
@alexlees
@cncolder
@rottenpen
@gcxfd
@twocucao
@pengtikui
@kala888
@LengYXin
@iugo
@jin-yufeng
@xuchengzone
@csolin
@xiaoyao96
@baranwang
@fred8617
@huanz
@Cslove
@002huiguo
@jazzqi
@Jetsly
@yuezk
@lukezhange001
@k55k32
@Soul-Stone
@hisanshao
@gjc9620
@younthu
@digiaries
@GoodbyeNJN
@Swordword
@helsonxiao
@Ininit
@atzcl
@taoqf
@Aysnine
@cjz9032
@z3rog
@doublethinkio
@Jackyzm
@ywzou
@koalaink
@mosqlee
@wangjuerong
@kdxcxs
@LiHDong
@ryougifujino
@GitaiQAQ
@logix-o
@CallMeXYZ

一、Highlights​

1. 开放式架构​

新增的插件：​

2. 新增小程序性能优化组件 CustomWrapper​

3. 原生小程序渐进式混合使用 Taro 开发​

4. 拥抱 React 17、TypeScript 4​

4.1. 使用方法​

新项目：​

旧项目：​

4.2. React 默认支持 New JSX Transform​

4.3. React H5 端默认开启 fast-refresh​

二、Breakings​

1. React​

2. Vue2​

3. Linaria​

三、特性​

四、问题修复​

1. 重要​

2. 小程序​

3. H5​

五、升级指南​

六、未来规划​

七、感谢​