关于javascript:Taro-34-beta-发布-支持-Preact-为应用开辟更多体积空间

我的项目体积是困扰小程序开发者的一大问题，如果开发者应用 Taro React 进行开发，更是不得不引入靠近 100K 的 React 相干依赖，这让我的项目体积变得更加顾此失彼。因而，Taro v3.4 的次要方向，是摸索对于 Preact 的反对。

Preact 是一款体积超小的类 React 框架，提供和 React 简直统一的 API，而体积只有 5k 左右。

反对应用 Preact

Taro v3.4 正式实现了对 Preact 的反对，下文将简略介绍适配思路及用法。

适配思路

1. 运行时革新

Taro 在小程序环境模拟实现了类浏览器环境，因而实践上任意的前端框架都能够在 Taro 中应用。

对于 Preact，它与 React 最大的不同在于没有实现合成事件零碎，而是间接应用浏览器的事件办法，此外还应用了大量和 React 不一样的 DOM API。

对于事件的适配，Taro 曾经提供了浏览器标准的事件办法，因而只须要再解决 Preact 的事件名与小程序事件名的差别。而对于 DOM 办法，则须要额定实现 Preact 应用到的 DOM API。

2. 兼容 React 生态

Preact 应用了 preact/compat 去磨平与 React 的 API 差别，让 React 的各种生态库能够间接运行在 Preact 上。得益于此，开发时咱们能够应用任意的 React 生态库，甚至对 React、ReactDOM 的 API 援用也不须要批改，只须要简略地配置 alias 即可：

// Webpack config
const config = {
  "resolve": {
    "alias": {
      "react": "preact/compat",
      "react-dom/test-utils": "preact/test-utils",
      "react-dom": "preact/compat",
      "react/jsx-runtime": "preact/jsx-runtime"
    },
  }
}

用法介绍

文档地址

新我的项目

运行 taro init 时，框架抉择 Preact 即可创立基于 Preact 的我的项目。

现有的 React 我的项目

1. 将 CLI、我的项目中 Taro 相干的依赖更新到 v3.4.0-beta 版本。
2. 装置依赖：

yarn add preact @tarojs/plugin-framework-react

3. 批改 Taro 编译配置：

const config = {
  // ...
  framework: 'preact'
}

4. 批改 Babel 配置：

module.exports = {
  presets: [
    ['taro', {framework: 'preact'}]
  ]
}

5. 如果我的项目应用了 TypeScript，请关上 skipLibCheck 配置，以防止和其它 React 生态库配合应用时报类型谬误：

{
  ...
  "skipLibCheck": true,
}

Vue 3 反对 Composition API 版本的小程序生命周期钩子

文档地址

Vue3 提供了 Composition API（组合式 API）个性，和传统的 Options API 不同，Composition API 提供了全新的编码方式，能够让咱们更好地去组织和复用代码逻辑。

过来 Taro 只提供了 Options API 版本的小程序生命周期钩子，开发者往往对于这些钩子和 setup 函数外部该如何通信、如何共享数据等问题感到困惑，更是不能很好地兼容 script setup 语法。

因而 Taro v3.4 提供了 Composition API 版本的小程序生命周期钩子，让开发者更不便地应用 setup 语法，例子：

<script setup>
import {useDidShow} from '@tarojs/taro'

useDidShow(() => console.log('onShow'))
</script>

运行时体积优化

目前 Taro 对于前端框架的适配层代码都放在了运行时库 @tarojs/runtime 里，意思即当开发者应用 React 时，还是会蕴含 Vue2、Vue3 的适配层代码。（Tree Shaking 失败的起因是应用了 Webpack Provider Plugin 导出 @tarojs/runtime 里的 BOM API）

因而，Taro v3.4 以 Taro 插件的模式去实现对于各前端框架的适配，其中一个益处是能够把上述运行时适配层的代码拆分到各个插件内。加上对运行时代码的写法优化，3.4 版本的运行时缩小了约 30k 的空间。

另一个益处是当初开发者能够通过编写 Taro 插件去反对任意的前端框架，而简直不须要改变 Taro 的外围代码。

降级指南

1. 装置 v3.4.0-beta 的 CLI 工具：

npm i -g @tarojs/cli@beta

2. 更新我的项目依赖

如果装置失败或关上我的项目失败，能够删除 node_modules、yarn.lock、package-lock.json 后重新安装依赖再尝试。

批改 package.json 文件中 Taro 相干依赖的版本批改为 ~3.4.0-beta.0，再重新安装依赖。

3.【Breaking Changes】装置对应的框架适配插件

因为 Taro v3.4 把各前端框架的适配逻辑拆分到对应的插件中，因而旧我的项目降级时须要装置对应框架的适配插件：

• 应用 React，请装置 @tarojs/plugin-framework-react
• 应用 Vue2，请装置 @tarojs/plugin-framework-vue2
• 应用 Vue3，请装置 @tarojs/plugin-framework-vue3

其余

Breaking Changes

• 百度小程序应用 onInit 代替 onLoad 生命周期，以优化首次启动工夫。

最初

接下来 Taro 的重心将会放在编译系统降级（如降级 Webpack5）和优化 H5 能力（如输入 SSR 计划、优化路由零碎等）上。

鸿蒙利用 && OpenHarmony

Taro 迭代的另一条主线是对 鸿蒙利用 && OpenHarmony 的适配，Taro 与 OpenHarmony 团队成立了跨平台 UI 趣味组（SIG-CROSS-PLATFORM-UI），联结社区独特开展适配工作。目前第一阶段的开发工作行将实现，12 月初会公布首个可用的体验版本。

相干征询：

• 鸿蒙 && OpenHarmony 适配小组
• 适配进度

鸿蒙 & OpenHarmony 交换群：

欢送关注凹凸实验室博客：aotu.io

或者关注凹凸实验室公众号（AOTULabs），不定时推送文章。