Taro 正式发布 3.3 版本：支持使用 H5 标签与框架 DevTools

[honlyHuang]

距离 Taro 3.3 第一个 alpha 版本的发布，已过去三个月的时间。期间我们不断地对 3.3 版本进行打磨，除了优化 H5 同构方案外，还引入了一些提升开发体验的新特性和修复了若干重要问题。

支持使用 H5 标签

Taro 3.3 最重要的特性就是支持使用 H5 标签进行开发，让开发者在小程序环境中复用部分的 Web 生态。

例如在 React 中可以这样使用：

function Index () {
  return (
    <div>Hello World!</div>
  )
}

相关背景及实现思路在 《Taro 3.3 alpha 发布》 一文中有详细说明。

用法

首先需要安装插件 @tarojs/plugin-html：

$ npm i @tarojs/plugin-html

然后配置使用即可：

// config/index.js
const config = {
  // ...
  plugins: [
    '@tarojs/plugin-html'
  ]
}

插件的详细用法请见文档。

示例项目

为了验证同构功能的可用性和效果，我们对 CSS 样式库 WEUI、React 组件库 Antd Design Mobile、Vue2 组件库 VantUI 的所有组件进行了测试。结果显示有相当一部分的组件能直接运行在小程序环境中。

示例项目仓库地址：

• 兼容 WeUI 的例子
• 兼容 Antd Design Mobile 的例子
• 兼容 VantUI 的例子

What's news

在开发 @tarojs/plugin-html 插件的时候，我们发现需要为 Taro 模拟的 DOM APIs 新增一些方法，如 getBoundingClientRect 等。但是对于不使用这个插件的开发者来说这些 API 是冗余的，会增大包体积。因此我们对 @tarojs/runtime 进行了重构，把 DOM APIs 做成可插拔式，让开发者可以选择在最终的编译结果里只存在哪些 DOM APIs。

本次对运行时的重构也是为了 Taro 3.4 版本作铺垫。React、Vue2 和 Vue3 这些框架运行时需要的 DOM APIs 是不尽相同的，但是目前假设开发者使用了 React，编译结果里仍然会存在着只有 Vue2 或 Vue3 依赖的 DOM APIs。Taro 3.4 将会把对各 Web 开发框架的支持逻辑抽离成为一个个插件，如：@tarojs/plugin-framework-react 等，目的是剔除掉冗余代码。

例如，假设开发者没有使用渲染 HTML 文本的 API（如 React 的 dangerouslySetInnerHTML）。这时可以修改 Taro 编译配置的 mini.runtime.enableInnerHTML 选项，令最终的打包结果剔除掉相关代码：

// config/index.js
config = {
  // ...
  mini: {
    runtime: {
      enableInnerHTML: false
    }
  }
}

小程序支持使用框架的 DevTools

自 Taro 3.x 改造为运行时框架后，有不少同学抱怨小程序开发者工具的 AppData 面板看到的都是 Taro 虚拟 DOM 的序列化结果，而不是页面的 data 数据。为了缓解这个问题，并进一步地提升开发者的开发体验，Taro 对 React DevTools 和 Vue DevTools 进行了适配。只需要简单地配置，就能够和开发 Web 应用时一样使用框架的 DevTools。

React DevTools

安装并配置使用 @tarojs/plugin-react-devtools 即可，详细用法请见文档。

效果图：

Vue DevTools

安装并配置使用 @tarojs/plugin-vue-devtools 即可，详细用法请见文档。

效果图：

修复百度小程序 flex 布局的问题

在过去很长一段时间里，Taro 3 在百度小程序里是不支持使用 flex 布局的。原因是逻辑层的每个 Taro DOM 节点都在渲染层使用一个对应的 <template> 进行渲染，而百度小程序会把 <template> 渲染成一个真实节点。

非常感谢 @SyMind 的 PR，帮助 Taro 绕过了此问题。从 Taro 3.2 开始，部分组件在百度小程序中也能够使用 flex 布局。

相关的讨论和提交可以浏览 #6015 #9529

升级指南

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

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

npm i -g @tarojs/cli

然后手工修改 package.json 文件中 Taro 相关依赖的版本，再重新安装依赖；或者使用 taro update project 更新依赖。

如果安装失败或打开项目失败，可以删除 node_modules、yarn.lock、package-lock.json 后重新安装依赖再尝试。

The End

Taro 3.4

下一个 minor 版本，我们会考虑把对各个 Web 开发框架的支持逻辑拆分为对应的插件。让开发者可以以插件的形式为 Taro 拓展支持一门新的开发框架，我们会运用此能力进行对 PReact 的支持，希望能进一步减少用户的包体积。

鸿蒙应用 && OpenHarmony

近期我们也一直在探索对鸿蒙应用 && OpenHarmony的适配，目前已有一系列的讨论和开发计划，也有可以运行的 Demo，详情请见 鸿蒙 && OpenHarmony 适配小组。

RoadMap：

欢迎各位开发者参与讨论和共建～

快应用

此外，社区大佬 @bgfist 正在为 Taro 开发支持快应用的功能。也欢迎各位开发者参与讨论和共建，相关 PR。

感恩

时光飞逝，1 年前 Taro 3 正式发布，Taro 逐渐成为被社区喜欢、信赖的开源项目。未来我们也将继续做好 Taro 的开源工作，同时也希望社区有更多的开发者参与进来，无论是提出 Issues、在论坛发帖、提交 PR 还是帮助建设周边生态等。让我们一起把 Taro 做好，做强。

最后，衷心感谢为 Taro 从 v3.2 走到 v3.3 贡献过代码的各位同学！

官方交流群点击直达>>