Support | 微信 & TG: @scomper

Framer X 学习笔记(七)版本

2018.12.27 19:33

刚开始使用 Framer X 的时候还不太理解,为什么每个项目文件都需要重新下载安装组件?如果像 OmniGraffle 那样组件都是离线共享方式的该多好。随着学习的深入才发现,Framer X 这样的做法没有问题,原因是 Framer X 的组件其实都是由代码组成的 package,和 OmniGraffle 那种静态的绘图数据不同,代码存在一个版本兼容问题,随着软件更新和升级这种兼容性会不断下降。

版本更新

打开一个早期的 Framer X 文件,项目文件的左下角经常会看到 Update 的提示,组件和库文件可能都需要更新。官方的组件跟进的会比较及时,第三方的组件在这一方面就不一定了。大多数时候遇到这种更新可以不用理会,不影响原型的实际效果。如果手欠更新了,也不会遇到大的问题,不过右下角的代码报错数值就不是 0 那么舒心了。

Store 组件一般都是在原有版本的基础上更新,我们打开项目文件在 Components 里 Update 组件就好。然而因为某些新的特性不再和旧版本相容,有些组件新的版本会单独发布一个版本,例如 iOS UI 类别里比较有代表性的组件 Feather UI,作者新发布的版本就是单独的,旧的组件被更名成 Feather UI(Legacy),两者都存在于组件商店里,但是显然 Feather UI(Legacy)以后不会再更新。

Framer X 的 Code 组件是通过文件夹进行分类,这就导致之后的组件地址与之前不同,如果某个项目想从旧的组件迁移到使用新的组件,只能手动操作。所以没有特别必要就让项目保持原有的代码相容状态就好,与其费时费力的搬砖头不如新建一个项目重新开始。

文档结构

新建一个 Framer X 文件,通过菜单项「File - Show Project Folder」能看到当前项目文件的具体内容。Framer X 已经帮我们构建好了所需要的文件,我们需要留意的是两个文件夹 Code 和 node_modules。

  • 当我们绘制一个 Frame 后,Code 文件夹中会自动生成 canvas.tsx、Examples.tsx 文件前者是画布内容的文件,后者是 Code override 的范例 .tsx 文件,后续新建的代码组件也会保存在这个地方。
  • node_modules 文件夹中保存的是项目用到的 node package,新安装一个组件,组件所需要的环境模块也会自动添加到这里,如果删除组件它的依赖模块也会随之删除。

为了直观的看到文件夹中的变化并理解组件和模块之间的依存关系,我们来安装一个新的组件看看。例如,安装一个 Simple Avatars 的组件,这是一个头像组件,可以显示方形、圆形和真人头像。

安装组件后采用 Copy Code 的方式来看看这个组件的具体代码是怎么写的。

  • 在已经安装的组件上右键,Copy Code;
  • 由代码 from Code 新建一个自己的 Components,为新的组件取一个名字,如:myAvatars;
  • 点击「Create and Edit」,Framer X 会打开关联的编辑器 Visual Studio Code;
  • Visual Studio Code 中全选范例代码粘贴替换为刚 Copy 的代码,保存后就有了一个克隆获得的新组件。

好了,现在看看具体这个组件的代码内容,同时可以打开项目的文件夹对照一下。
代码开头的部分 import 的部分比 Framer X 默认的代码组件范例多了模块,和 node_modules 文件夹中新增的模块是一一对应的。也就是说,如果要在 Framer X 中使用外部的 node 模块,首先需要将这些依赖模块安装到 Framer X 的项目文件夹当中,然后在代码组件的代码里 import 它们。

等等, Simple Avatars 组件的介绍页面提到,它可能还需要依赖另一个库 shrug。

I actually don't know if this will work as it relies on some external libs. You may have to cd into the project dir and yarn install /shrug

这是怎么回事呢?这里提到了 yarn,提到了另一个模块 shrug 的安装,如何才能安装到当前项目呢?

代码环境

Framer X 虽然自动部署了相应的代码环境,但是如果经常需要使用外部模块,或者遇到组件的环境不完全的时候,可能都需要考虑本机的代码环境问题。为了搞清楚这个问题,又是一个很深的坑。不过还好,梳理清楚以后编码环境的部署上也不是那么可怕。

Framer X 是面向程序员同样友好的软件之一,所以 Framer X 的项目可以平滑的提供给开发者,反之生产环境中的 React 代码也能通过部署在 Framer X 项目中使用。这也就说明了 Framer X 的代码环境部署和开发环境其实是很接近的。

前面提到了 yarn,yarn 是比 npm 更新更受欢迎的包管理器,😳 npm 又是什么呢?npm(全称 Node Package Manager,即“node 包管理器”)是 Node.js 默认的以 JavaScript 编写的软件包管理系统。开发生产环境中,并不是所有的代码都是程序员创造的,很多功能都有现成的 Node.js package 模块包,程序员某些时候像是在搭积木,把不同的模组组装起来,从而实现不同的功能。

简单方式可以这样理解,Framer X 的代码组件是通过 node_modules 文件夹中的 node 模块来实现的,要想自己管理这里的软件包,需要 nvm、node 和 yarn。具体的项目里,通过 yarn 安装各种需要用的 package「包」。

node.js Node.js 事实上既是一个运行时环境,同时又是一个库。它允许在后端(脱离浏览器环境)运行 JavaScript 代码。Node.js 使用 Google 的 V8 虚拟机来解释和执行 JavaScript 代码。nvm 和 Yarn 是包管理器。

1、首先安装 nvm(nvm 是 Mac 下的 node 版本管理工具),在终端中输入
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

2、安装 node 的最新版本
nvm install node

3、安装后输入 node -v 来查看版本
node -v

4、安装 yarn(yarn 是比 npm 更新更受欢迎的包管理器)
npm install -g yarn

Yarn

安装好以后就可以使用 Yarn 来管理和维护项目中的 package。
先定位到 Framer X 中的具体项目,打开 Framer X 文件,通过菜单项「File - Show Project Folder」定位到 container 的项目文件夹。按住 ⌘ 选中文件夹拖拽到终端窗口,终端窗口中回车就进入了这个文件夹。

安装前面 Simple Avatars 组件提到的可能需要的依赖包 shrug。只要简单的yarn add shrug就可以,但是还是实际验证一下比较好。

注意这里使用的是 yarn add 而不是 yarn install,yarn 的命令行在新版本有些变化。

还记得吗,前面我们基于 Simple Avatars 组件克隆了一个新的组件,如果此时在 components 中 uninstall 掉 Simple Avatars 组件,只留下我们克隆的组件就能验证这个组件的包依赖情况。

删掉 Simple Avatars 组件后,myAvatars 组件拖拽到页面上会报错,用 Visual Studio Code 打开 myAvatars.tsx 文件能看到最上面的 import 部分,tinycolor2、color-diff、color-hash、framer 都有红色的 〰️ 标示为有错误。

import * as tinycolor from "tinycolor2";
import * as diff from "color-diff";
import * as colorHash from "color-hash";
import { PropertyControls, ControlType } from "framer";

既然是这些包的缺失报错,那么我们就通过 yarn 来安装这些包。
在终端中依次输入yarn add tinycolor2yarn add color-diffyarn add color-hashyarn add framer添加依赖包。
等等,Framer X 的 framer 库 0.10.1 依赖的 react 版本是 16.3,系统现在的是 16.7,太新了,如果要保持代码之间的相容消除这个报错,需要安装上旧的 react 16.3 的库。

输入yarn add react@^16.3 安装旧的 react 库。
最后yarn check 检查一下还有没有报错。
yarn list 查看当前项目安装的所有的包。

依赖包安装好,再回头看看 myAvatars.tsx 文件中的错误提示已经消失,组件也可用了,貌似不需要安装 shrug 也正常。

更多关于 yarn 的命令可以访问 https://yarnpkg.com/zh-Hans/


从上面的组件例子可以了解到,如果要克隆某个代码组件,不仅需要 Copy Code,还需要安装它所需要的依赖库。如果遇到组件说明中提到需要某些库的支持也可以用 yarn 来单独安装。另外,解决报错的经历也告诉我们,项目的代码环境是相对的,并不是最新的版本就可以,很多组件是基于某个 react 版本开发的,最新的 Framer X 的可能并不能匹配代码的环境,遇到报错可以针对性的通过 yarn 安装特定版本的包。

Framer X 发布以来,自身的版本迭代速度很快,在不影响项目实现的基础之上,很多时候不需要太在意版本相容上的报错,需要注意的是重要项目不要轻易更新,保持代码的相对环境稳定就好。

Comments
Write a Comment