如何在dumi中开发Taro组件

由于移动端业务上使用Taro框架进行开发，在此期间产生了一些taro写的业务组件，想迁移到dumi中，但dumi不兼容taro组件的在线编写，于是乎，我开启了曲线救国计划。

1. 思路

由于dumi支持通过配置demoUrl来修改移动端模拟器的路径，所以我就在项目的根目录中，新增一个taro项目，然后将demoUrl指向这个taro项目，在dumi中保存后，同步将修改的组件迁移到taro项目中，实现实时的开发预览。

2. 如何同时跑两个项目

我们将taro项目迁移到根目录中，这也就意味着，我们需要在开发的过程中，同时跑两个项目，这里我用到了一个npm库 concurrently 进行了处理，然后在package.json中，将npm run start这个命令稍作修改就能同时跑两个项目了。

3. 实现实时编译

在dumi的src文件夹发生修改的时候，我们需要将更改的组件同步迁移到taro项目中，于是，我们可以比较轻松的写下以下的脚本，这里运用到了多个js库，感兴趣的可以去研究一下。但不建议使用原生node做文件的改动监听，因为在windows上会莫名触发多次change改动。

当然了，在进行项目部署或者开发者第一次运行项目的时候，我们需要一个能够全量迁移组件的脚本，因为我把taro的pages和app.config.ts文件都加到了gitignore文件中。脚本也比较简单，代码一看就会。

4. 定制umi的Previewer

还差一步，我们需要根据当前项目的运行环境来动态配置demoUrl的值，一开始想的是定义一个全局变量，然后在每个组件的demo中根据这个变量来改变demoUrl的值。但太麻烦了！对于开发者来说这本身就是一个重复的工作，好在dumi提供了主题的自定制修改 ，让我能够省下一些脑细胞，于是我们在项目的根目录下新增.dumi文件夹，目录结构如下：

然后去github中，将dumi-mobile的中的previewer.tsx文件拷贝过来，我们要实现的就是在他的基础上改变demoUrl的值，如下：

这样我们就能实现开发taro组件啦～ 

5. 小结

由于没有太多的在dumi中开发taro的实现方案，小弟只能先进行曲线救国的策略，如果大佬们有更好的方法，请多多指教，谢谢～