在windows下运行阿里低代码引擎

今年3月23日阿里的低代码引擎正式对外开源，公司正好也在做相关的业务，通过对比阿里的低代码引擎确实更加做的出色，所以我们打算在他的基础上进行拓展。

官网地址：https://lowcode-engine.cn/
github： https://github.com/alibaba/lowcode-engine

首先我们来看下低代码引擎跑起来的样子

左侧分别是元素树，组件库，数据源，源码面板，中间就是编辑画布，右侧则是相关的数据绑定，配置设置等等，简单拖拖拽拽尝试了下，他在很多细节上做的很贴心，还可以预览不同分辨率下的页面效果，做的挺好的，并没有更深入地去体验，公司大佬已经调研过了，这次主要是基于它去拓展物料。

开始尝试拓展物料

跟着官方文档操作

1. npm init @alilc/element your-material-name
2. 选择引擎生态元素类型？我们选择组件/物料
3. 选择包模式？我们选择react-组件库
4. 其他的回车就ok了
5. cd进项目，npm install安装依赖
6. 等依赖安装完成，我们直接启动项目 npm run lowcode:dev

然后就喜闻乐见的报错了

查看报错信息，我们发现文件路径变得很奇怪，导致找不到meta.js和view.js文件，我们去这2个文件下看看呢

---

.tmp是编译之后的文件，我们发现这2个文件的引入地址不是/而是\，这就很神奇了，因为像这种编译文件一般都不会出问题，因为项目初始化的配置基本上都是帮你配置好的，去官网查阅文档有这么一段话

也就是说Windows环境必须使用WSL，其他终端不能保证正常工作，我拓展下物料还得装个linux。。。这太麻烦了，我用mac试了下，mac可以说完美运行，但是之后的开发工作，我并不想在mac上操作，只能尝试自己去解决。

#解决前须知

有条件在linux跑还是在linux跑吧。。。毕竟是官方推荐的方式

一开始我按照自己的方式确实可以让项目跑起来，COMT同学在根据我的步骤操作的时候，发现组件不会加载，最后COMT同学找出问题所在，@alifd/build-plugin-lowcode的包升级了，所以没有加载组件，他提供了一个不错的解决方案，就是将@alifd/build-plugin-lowcode版本修改为^0.1.19就可以让项目跑起来，这里非常感谢COMT同学

所以这里面会存在一个版本的问题，我当前版本为@alifd/build-plugin-lowcode为^0.2.0，又重新修改了一些地方，如下。

尝试解决1

我一开始直接去修改编译之后文件的路径，但是重新启动之后，文件又会编译一次，也就是说路径又变成linux的路径方式了，去官方提issues给我的回复也是装wsl。

尝试解决2

本来打算学着装个虚拟机然后装linux了，看了一些教程感觉好麻烦啊，所以我想试试通过它的源码，是否能解决这个路径问题，接下来就是漫长的研究源码之路了。

首先我们去看，当我执行启动命令的时候，他做了些什么

可以看到执行了build-script，而build-script又指向了一个包，去node_modules里去看看这个包。

然而并没有结果。。然后我在配置中又看到这个包，再去node_modules看看呢

找到了一丝线索build-script的start指令？

追踪下去看看，猜想viewPath和metaPathMap就是我想找的东西

然后他的debounceBuild又指向了build函数，找到metaPaths，又从bundleMetaV2函数中拿到结果，追踪！

我们在bundleMetaV2的函数中可以看到这两段代码，内容结构很熟悉啊，打印下看看是啥，果然这里就能看到路径已经被改成\了

尝试修改代码，如下，匹配所有的反斜杠，修改为正斜杠

启动下试试，我们可以看到虽然还有报错，但是编译后的文件路径成功被修改了，那么说明方向对了

直接加快进度吧，经过多次审查，debug代码，在下面这些地方修改代码，就能完美跑起来了

---

---

接下来就是第二次发现问题并且修改的操作步骤，最新修改时间2022-04-06

上图可以解决不加载默认组件的问题
然后去第二个解析资源的工具包里修改，注意包名，这里不是同一个包了

---

ok最后可以了

最后复盘下，官网的readme还是有必要看看的，如果不抱着学习的态度去读别人源码，那么过程注定是痛苦的，但是当解决完问题之后，又充满了成就感。

我的微信公众号： 梨的前端小屋