一次被迫的前端试手

去年小伙伴们在做一款产品的时候,有一个功能在上架商店时无奈砍掉了。说起来很简单,就是要在画布上支持手绘一个闭合区域,并支持在成型后进行对轮廓线的手触调整。开始的时候找到一个第三方的 native 库的支持,可惜上架有 64 位的强制要求,而该 .so 已经不再更新,只好将这个小功能去除。

这个功能听起来不大,其实要想做好还是有很多要考虑的东西的。手触轨迹的平滑绘制、闭合图形的闭合检测、后期调整的平滑变换以及线条交叉检测等等,都要考虑在内。在 GitHub 上偶遇一个介绍是简单手绘程序的项目,心说看看这里面有没有可以参照的东西。

git clone 是最简单的步骤,接下来就有些挠头。怎么才能运行起来呢?看到一个名为 ng-package.json 的文件,心想这大概是个 angular 项目。(不好意思,作为前端盲的老夫竟然知道 ng 是 angular 常用的简称是不是很神奇?)好吧,把 node(自带 npm)装上(于是有了昨天的 blog),下一步呢?查了下,是要 ng serve。结果是令人崩溃的,它说这个不是一个 angular 项目!这不科学啊!判定是不是 angular 项目的标准是什么,又得找,据说是 angular-cli.json。项目里没有这个文件,但有一个名字和它基本一样的,只不过最前面多了个句点。不管它,复制出一个来,ng serve 高冷依旧。又看资料,说最新版的 angular 已经不用 angular-cli.json,而是 angular.json。咱再改,这次 ng serve 很给面子,开始搭理我了,只不过报了个非常莫名其妙的错出来。

看了看信息,感觉超纲了。只好打扰一下小朋友了。兄弟一听,立刻开出良方:你只管 npm install 再 npm run start 就好。照办!为了恢复现场,把手动搞出来的 angular.json 删掉先。果然,npm 一派繁忙的景象。执行结束后,说有 39 个潜在风险,可以用 npm audit fix 尝试自动修复,如果不成,还可以用 npm audit 查看细节,引导手动修复,但无论哪种方式,都说可能会导致 breaking。自动修复了一下,修了两个,别的先扔着吧。因为除此以外,npm install 还报了很多必须手动安装的 module,逐个安装后 npm run start 终于显示出了已经监听在 localhost 某端口的信息。不过几秒后,立刻又出了两屏的红色错误,看的眼晕。硬着头皮看了看,说是 intl 怎么怎么,到源代码里看了下,那条语句写的是 import intl。感觉是项目组织的时候,把这个叫 intl 的模块依赖给遗漏了。手动 npm install intl 后再次 npm run start,果然成功运行。

有洁癖的我,最不愿见到的就是一团糟的环境,于是向人请教 npm 的模块安装位置。npm install 有个选项是 -g,也即全局之意。我的第一猜测是,带有 -g 标识则安装至全局路径,否则会安装到当前用户的路径下,如果当前工作目录是以一个项目的话,则安装至项目之中。高手的答复是,我猜想的第二种情况是不存在的,不加 -g 就是下载(也即安装)到当前目录,如果当前目录不是个项目,那就相当于下载了一堆垃圾。如此甚好,简单、直接、干净,我喜欢。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注