Taro 3.4 beta 发布: 支持 Preact 为应用开辟更多体积空间

技术Taro 3.4 beta 发布: 支持 Preact 为应用开辟更多体积空间 Taro 3.4 beta 发布: 支持 Preact 为应用开辟更多体积空间项目体积是困扰小程序开发者的一大问题,如

Taro 3.4测试版:支持Preact,为应用开辟更多空间

项目量是困扰小程序开发者的一大难题。如果开发人员使用Taro React进行开发,就不得不引入接近100K的React相关依赖,这使得项目量更加捉襟见肘。因此,Taro v3.4的主要方向是探索对Preact的支持。

Preact是一个超小型的类似react的框架,提供的API几乎和React一样,但是体积只有5k左右。

支持使用 Preact

Taro v3.4正式实现了对Preact的支持,下面简单介绍一下适配思路和用法。

适配思路

1. 运行时改造

Taro模拟小程序环境中类似浏览器的环境,所以理论上任何前端框架都可以在Taro中使用。

对于Preact来说,它和react最大的区别就是没有实现合成事件系统,而是直接使用浏览器的事件方法,此外还使用了少量与React不同的DOM API。

对于事件的适配,Taro提供了浏览器规范的事件方法,所以只需要处理Preact的事件名称和applet的事件名称的区别。对于DOM方法,需要额外实现Preact使用的DOM API。

2. 兼容 React 生态

preact使用preact/compat抹平REAT和REAT的API差异,让REAT的各种生态库可以直接在Preact上运行。得益于此,我们在开发时可以使用任何REAT生态库,甚至对REAT和ReactDOM的API引用都不需要修改,只需简单配置别名即可:

//Webpack配置

const config={

解决' : {

别名' : {

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 项目

将CLI和项目中与Taro相关的依赖项更新到v3.4.0-beta版本。

安装:

纱线添加preact @ tarojs/plugin-framework-react

修改Taro编译配置:

const config={

//.

framework: 'preact '

}

修改巴别塔配置:

module.exports={

预置: [

['芋头',}

framework: 'preact '

}]

]

}

如果项目中使用了TypeScript,请打开skipLibCheck配置,以避免在与其他React生态库一起使用时出现错误的时间类型:

{

.

skipLibCheck':为真,

}

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

文档地址

Vue3提供了组合API (Composition API)的特性。与传统的Options API不同,Composition API提供了一种全新的编码方法,让我们可以更好地组织和重用代码逻辑。

过去,Taro只提供了applet生命周期钩子的Options API版本。开发人员经常对如何在这些钩子和设置函数之间通信和共享数据感到困惑,并且它们与脚本设置语法不太兼容。

所以太郎

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_modulesyarn.lockpackage-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),不定时推送文章:

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/117958.html

(0)

相关推荐

  • 如何使用源码解析AbstractOwnableSynchronizer

    技术如何使用源码解析AbstractOwnableSynchronizer如何使用源码解析AbstractOwnableSynchronizer ,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解

    攻略 2021年10月28日
  • node.js使用的是什么规范(node.js更新完之后常见问题)

    技术Node.js的相关问题有哪些本篇内容主要讲解“Node.js的相关问题有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Node.js的相关问题有哪些”吧!1. No

    攻略 2021年12月21日
  • ibatis映射需要字段一样多吗(ibatis如何映射到dao层)

    技术如何分析iBATIS动态映射这期内容当中小编将会给大家带来有关如何分析iBATIS动态映射,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。iBATIS动态映射都是用在复杂查询过程中,

    攻略 2021年12月19日
  • oracle中日期时间型timestamp怎么用

    技术oracle中日期时间型timestamp怎么用这篇文章将为大家详细讲解有关oracle中日期时间型timestamp怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1、字符型

    攻略 2021年11月11日
  • MySQL源代码目录有哪些

    技术MySQL源代码目录有哪些这篇文章主要介绍了MySQL源代码目录有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1、源代码目录介绍:1、BUILD

    攻略 2021年11月1日
  • "docker build" requires exactly 1 argument(s).报错的解决方法

    技术"docker build" requires exactly 1 argument(s).报错的解决方法"docker build" requires exactly 1 argument(s).报错的解决方法,很

    攻略 2021年11月12日