// config/index.js

const config = {
  h5: {
    webpackChain(chain) {
      chain.resolve.alias.set(
        // 当前版本适配层地址 @tarojs/components/dist/[framework]
        '@tarojs/components/dist/react',
        // 旧版本适配层地址 @tarojs/components/dist/[framework]/component-lib
        '@tarojs/components/dist/react/component-lib'
      )
    },
  },
}

2. Automatic generation of types​

How to quickly synchronize the types currently supported by each small program platform has always been a headache for Taro. It is difficult to follow up every update of each platform in real time. More often, we pass the PR submitted by the developer. Or issue type updates for these platforms. It will be a great experience for developers if the component types can be automatically generated according to the official documents provided by each mini program platform.

Through active discussions and demonstrations in the Taro community, we have introduced a script that automatically synchronizes the component types of each Mini Program platform, and through cooperation with GitHub CI, let the robot submit type update PRs for the Taro warehouse. The automation of component types also allows Taro’s documents to synchronize the changes of these platform components when the types are updated, providing developers with better document indexing capabilities.

special thanks here @rebinv8 Contributions to component type automation scripts~

three,Support to adapt Hongmeng​

Established an official partnership with OpenHarmony at Taro and was invited to form After the CrossPlatformUI Sig (cross-platform front-end framework interest group), it has been on the agenda to allow Taro to support the adaptation of Hongmeng. Hongmeng’s Ark development framework provides Web-like programming and supports the use of JS to develop the UI layer. You can use Taro’s existing architecture to adapt to Hongmeng.

Developers who continue to pay attention to Taro may remember that in the v3.5-canary version, we launched a plug-in that supports the adaptation of Taro applications to the Hongmeng platform, but in the end it was not integrated into the v3.5 version trunk and launched this capability along the way.exist @tarojs/plugin-platform-harmony The terminal platform plug-in has been polished for a period of time, and the relevant capabilities and features have been continuously optimized under the promotion of the community. The project compiled by the framework has been further verified on the Hongmeng development board. At the same time, the new Taro v3. @tarojs/webpack5-runner The compiled kernel can also provide support for compiling the Hongmeng project in the canary version. Finally, in v3.6-canary, we once again provided community developers with a port platform plug-in adapted to Hongmeng.

How to use​

1. Install the Hongmeng terminal platform plug-in in the project

   <pre style="margin-left:0; margin-right:0">
   

   pnpm add -D @tarojs/plugin-platform-harmony@canary

   <blockquote>
   需要注意鸿蒙插件不在 Taro 项目内维护，所以并不会每次发布同版本号版本，直接使用 minor 与 Taro 版本号相同的版本即可。
   </blockquote>
   </li>
   <li>
   在<span> </span><code>config/index.js</code><span> </span>中增加编译配置
   
   
   
   <pre style="margin-left:0; margin-right:0">
   

   // config/index.js config = { // 配置使用插件 plugins: ['@tarojs/plugin-platform-harmony'], mini: { // 如果使用开发者工具的预览器（previewer）进行预览的话，需要使用 development 版本的 react-reconciler。 // 因为 previewer 对长串的压缩文本解析有问题。（真机/远程真机没有此问题） debugReact: true, // 如果需要真机断点调试，需要关闭 sourcemap 的生成 enableSourceMap: false, }, // harmony 相关配置 harmony: { // 【必填】鸿蒙应用的绝对路径 projectPath: path.resolve(process.cwd(), '../MyApplication'), // 【可选】HAP 的名称，默认为 'entry' hapName: 'entry', // 【可选】JS FA 的名称，默认为 'default' jsFAName: 'default', }, }

   </li>
   <li>
   准备鸿蒙运行环境
   
   <blockquote>
   开发鸿蒙软件需要用到 HUAWEI DevEco Studio，它提供了模板创建、开发、编译、调试、发布等服务。
   </blockquote>
   
   鸿蒙运行环境主要包括以下内容
   
   （1） 注册开发者账号
   
   （2）下载 DevEco Studio 安装包
   
   （3）启动 DevEco Studio，根据工具引导下载 HarmonyOS SDK
   
   （4）新建 MyApplication JS 项目
   
   （5）使用预览器或真机查看应用效果
   
   参考资料：《<a href="https://juejin.cn/post/6972109475347955749" target="_blank">初窥鸿蒙</a>》、《<a href="https://developer.harmonyos.com/cn/develop/deveco-studio" target="_blank">华为开发者工具</a>》、《<a href="https://developer.harmonyos.com/cn/documentation" target="_blank">鸿蒙开发文档</a>》
   </li>
   <li>
   项目运行
   
   Taro 编译鸿蒙项目命令
   
   
   
   <pre style="margin-left:0; margin-right:0">
   

   $ taro build —-type harmony —-watch

   <img alt="taro-harmony-example" src="https://storage.360buyimg.com/aotu-team/zakary-blog/2022-11-18-Taro-3.6-canary/taro-harmony-example.png" />
   
   <blockquote>
   testHarmony 为您通过 DevEco Studio 创建的 JS 项目。
   </blockquote>
   </li>
   

Special thanks to the following students for their contributions to Hongmeng Adapt:

@AdvancedCat, @jiaozitang, @huozhongyi123, @troy-sxj, @JSZabc, @crazyonebyone, @evernoteHW, @soulhat, @xueshuai, @LuMeiling

4. RN​

1. React Native version 0.70 supports​

React Native version 0.70 was officially released on 2022-9-5. In version 0.70, Hermes has become the default JS engine, we will keep it consistent with the default configuration of RN, if not needed, it can be closed by itself. Hermes has also brought about a big improvement in RN performance, especially in the startup scene. For details, refer to the official article. Taro will keep pace with the RN community, setting the default RN version to 0.70.Relevant dependencies have also been synchronized to the latest version and can still be used yarn upgradePeerdeps to update.@react-native-community/clipboard and @react-native-community/cameraroll Deprecated, can be removed after update.

Note: iOS 12 will no longer be supported after the upgrade, please refer to discussions.

2. @tarojs/rn-runner code refactoring​

In previous versions, in order to allow Taro code to run on the RN platform, we made more customizations to the compilation process of Metro, and encapsulated the entry file and related configuration of Metro. Doing so caused several problems:

1. Packaging can only be done through yarn build:rn and so on, and cannot be used react-native bundle There is a learning cost.
2. In the compilation process of RN, it is necessary to filter out the original bundle packaging process of RN and replace it with Taro’s packaging. In this step, problems often occur during the construction of the developer environment.
3. The entry file cannot be processed, such as adding some global logic.

In order to make the overall development experience more consistent with RN and reduce the cost of understanding for developers. We refactored @tarojs/rn-runner’s code. All the compilation logic required by Taro RN is encapsulated into the metro configuration. The new version will create an entry file index.js and a configuration file metro.config.js in the project root directory. If the project itself has these two files, they will not be generated and need to be added or merged with reference to the template. In addition, the relevant configuration of Taro RN is concentrated in the resolver and transformer. If you need to cover it, it is recommended to look at the relevant source code first.

After doing so, the packaging process of Taro RN is not much different from RN itself, and the integration with RN project will be more flexible.react-native For the use of the command line, please refer to the official documentation, yarn build:rn etc. commands are still reserved.use react-native The command line cannot automatically print the QR code, please enter q to print. For scenarios such as ip replacement, you can also enter q Reprint the QR code.

3. The debugging tool Taro Playground is upgraded to Taro 3.6 version and React Native 0.70​

Taro Playground As a debugging tool and cross-terminal Demo on the Taro RN side, it has been updated synchronously.This update cannot guarantee backward compatibility. Developers using older versions of Taro, if they need to debug Android, can go to releases Download the old package for debugging. In the App Store, we only list the latest version. Developers who need older versions should not enable automatic app updates. If you accidentally upgrade, you need to package and compile it yourself, or contact us to join the testing group.

5. R&D ecology​

1. Small program continuous integration CI​

Last year, Taro provided continuous integration plug-ins for applets @tarojs/plugin-mini-ci to help developers provide a better R&D experience. After a year of project precipitation and feedback, a better experience is provided in this version update.

This new feature supports independent open,preview,upload Commands, operating custom directories are suitable for development scenarios where taro is used as part of the project (mixed development); at the same time, the CI version changes of each applet are synchronized again, and it is supported to be applied to the DingTalk applet; the output after CI construction of all platforms is unified data, and pass the data to the newly addedonPreviewComplete,onUploadCompleteUsers can write new plug-ins based on the two hooks, and implement Feishu, DingTalk’s CI push function, etc. based on this hook.

For more details, please refer to the official document, and special thanks @bigMeow Contributions to component type automation scripts~

2. PostCSS version upgrade​

During the continuous iteration of the Taro project, some of the dependencies were stable and did not follow up the features and optimizations in each community in real time, and upgrade related dependencies. PostCSS is one of them. If developers want to optimize the build process and final product through the features of the new version, it will be relatively difficult and there may be certain problems and blockages.

For this reason, in 3.6 canary, the PostcCSS version was sorted out and upgraded by sorting out the relevant plug-ins and dependencies in the project. The upgraded version is v8.4.18. This upgrade mainly includes the following contents:

1. The PostCSS plug-in inside Taro is rewritten using the PostCSS 8 version API, which reduces the amount of code and reduces the number of CSS scans by the plug-in to improve the construction speed;
2. Use peerDependencies to manage postCSS dependencies, reducing the size and complexity of user’s node_modules;
3. The PostCSS version of Taro full template is updated synchronously, which is convenient for developers to use new features.

Special thanks to @xueshuai Contribute to related work, hoping that developers can get a better research and development experience.

6. Upgrade Guide​

1. create canary version project:​

# 安装 **v3.6.0-canary 的 CLI 工具**
npm i -g @tarojs/cli@**canary
# 创建 canary 版本项目
taro init taro_canary_project

# 也可以跳过安装 CLI 工具使用 npx 创建 canary 版本项目
npx** @tarojs/cli@**canary init taro_canary_project**