i5ting / imove

INACTIVE: Move your mouse, generate code from flow chart
https://www.yuque.com/imove/docs/hvu0md
MIT License
3.75k stars 343 forks source link

imove的节点import的npm包是cnpm私服上的包的解决方案 #105

Open i5ting opened 3 years ago

i5ting commented 3 years ago

imove的节点import的npm包是cnpm私服上的包的解决方案

基本原理

假定本地已经安装过debug模块,此时再执行下面脚本

import {install, printStats} from 'esinstall';

// Feature: Print detailed install stats to the console, including installed file sizes.
const {success, stats} = install(['debug']);
if (success) {
  printStats(stats);
}

在web_modules目录下面,创建debug.js和import-map.json,具体结果如下。

$ tree web_modules
web_modules
├── debug.js
└── import-map.json

0 directories, 2 files

如果指定web_modules为http目录,此时就可以直接通过http访问了。

改造

cnpm搭建npm私有源是非常常见的事儿。为了在imove的节点import的npm包是cnpm私服上的包,此时需要自己写一个服务,功能如下。

  1. 如果cnpm上没有对应包的esm版本(直接check源码是否为esm,另外一个方式通过路由里增加-esm来检测包是否存在),走esm转换生成逻辑。
  2. 通过改造esinstall,生成新的esm包,在原报名上增加-esm生成一个新的模块。将它发布在cnpm源上,注意所有-esm的包都必须是此服务生成的,否则后面会有权限问题。本身cnpm就支持版本,所以特定版本也是可以实现的,比如https://r.cnpmjs.org/debug/3.1.0对应的esm就是https://r.cnpmjs.org/debug-esm/3.1.0
  3. 【可选】该服务可以通过lru自己每天缓存新生成的n个模块。

原理

问题

imove的做法在线写函数,然后导出文件。飞羽用的时候习惯性的直接改导出后的文件,这就涉及了2边的同步问题。

其实很好解,本地文件变动事件是能检测,根据文件名反解x6的json找到节点id,继而通过ws去更新ui里的函数即可。反之更简单。

临时想法,抛砖引玉,大家可以讨论一下。