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)

相关推荐

  • 在mysql如何查找效率慢的SQL语句

    技术在mysql如何查找效率慢的SQL语句这篇文章主要介绍在mysql如何查找效率慢的SQL语句,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、MySQL数据库有几个配置选项可以帮助我们及时捕获

    攻略 2021年10月29日
  • 幂的乘方50道计算题,初一解方程计算题有过程答案

    技术幂的乘方50道计算题,初一解方程计算题有过程答案1。某中学修整草场,如果让初一学生单独工作,需要7。5小时完成;如果让初二学生单独做,需要5小时完成。如果让初一幂的乘方50道计算题、初二学生一起工作1小时,再由初二学

    生活 2021年10月22日
  • 怎么用Python代码批量抠图

    技术怎么用Python代码批量抠图这篇文章主要讲解了“怎么用Python代码批量抠图”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用Python代码批量抠图”吧!1.

    攻略 2021年11月1日
  • 向日葵的特点是什么,向日葵最主要的特点是什么?谢谢

    技术向日葵的特点是什么,向日葵最主要的特点是什么?谢谢向日葵最主要的特点:一向日葵的特点是什么、外形特点向日葵的茎直立生长,植株高度在1-3. 5m之间。它的叶片为广卵形,正反两面都长有绒毛,并且比较粗糙,叶缘处还长有锯

    生活 2021年10月30日
  • 如何理解JavaScript预解析及对象

    技术如何理解JavaScript预解析及对象本篇文章为大家展示了如何理解JavaScript预解析及对象,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。一、预解析1、变量预解析和函

    攻略 2021年11月9日
  • java转义字符正确使用方法(java转义字符是什么意思)

    技术Java中常见的转义字符有哪些本篇内容主要讲解“Java中常见的转义字符有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Java中常见的转义字符有哪些”吧!  在Ja

    攻略 2021年12月22日