Due to the application of Taro framework in mobile terminal business development, during this period, some business components written by Taro have been generated, and I want to migrate them to Dumi, but DumI is not compatible with online compilation of Taro components, so I started the Curve National Salvation plan.

1. The train of thought

Dumi supports modifying the path of the mobile emulator by configuring demoUrl, so I added an Taro project in the root directory of the project, and then pointed demoUrl to this taro project. After saving it in Dumi, I migrated the modified components to the Taro project synchronously, realizing the real-time development preview.

2. How do YOU run two events at once

We migrated the Taro project to the root directory, which means that we need to run two projects simultaneously during development. Here I used an NPM libraryconcurrentlyThen, in package.json, modify the NPM run start command to run both projects at the same time.

3. Real-time compilation

When the SRC folder in Dumi changes, we need to synchronize the changes to the taro project. Therefore, we can easily write the following script, which uses several JS libraries, for those who are interested in studying. However, it is not recommended to use native Node to listen for file changes, because Windows can trigger multiple change changes for no apparent reason.

Of course, we need a script to fully migrate components when deploying the project or when the developer runs the project for the first time, because I added taro’s Pages and app.config.ts files to the Gitignore file. The script is also relatively simple, and the code is easy to read.

4. Customize UMI’s Previewer

One step further, we need to dynamically configure demoUrl values based on the environment in which the project is currently running, starting with the idea of defining a global variable and then changing demoUrl values based on this variable in the demo for each component. But it’s too much trouble! This in itself was a repetitive task for developers, but dumi’s custom theme modification enabled me to save some brain cells, so we added the dumi folder to the root directory of the project. The directory structure is as follows:

Then go to Github and copy the previewer. TSX file from Dumi-Mobile. What we want to achieve is to change the value of demoUrl based on it as follows:

This will enable us to develop the Taro component

5. Summary

Since there are not too many implementation plans to develop Taro in Dumi, junior brother can only carry out the strategy of curve saving the country first. If you have a better method, please give me more advice, thank you ~