title: 用飞冰Ice创建代码素材库到底行不行？
category: Web
tag: [飞冰,ice]
date: 2019-07-12
主标题：用飞冰Ice创建代码素材库到底行不行？
副标题：Ice 飞冰自建物料库
我一直在寻找更简单的方式建立公司的常用组件库。如果组件库内容足够全，日常运营时候能省很多事，通过组合不同的模块，生成新的页面。很适合我们常说的“这个专题，今天要做，明天要上，后天要下”这种节奏。
这次调研的是飞冰。结论是还不太行：组件不支持私有化。
什么是飞冰
飞冰（ICE）诞生于阿里巴巴内部大量的中后台业务，我们在中后台场景沉淀了大量的物料、工具以及经验，同时也抽象出一套从物料到页面的高效开发流程。如果你符合以下场景之一，那么欢迎了解下飞冰（ICE）：
- 你正在使用 React/Vue 开发大量的后台（PC）页面，你可以使用飞冰已有的物料或者建设自定义物料提高开发效率
- 你所在的公司在前端研发流程上处于不完整或者缺失状态，那么你可以直接使用 iceworks 的开发流程
简单说，飞冰官方和社区制作一批组件（支持react，vue，ng），我们可以从中挑选适合的组件，在工具里迅速拼一个PC页面，然后编写自己的业务逻辑就行了。
官方提供的物料库已经挺多内容了，按照作用范围分为：
- 项目。
- 模板。给定的一个页面
- 区块。页面里一个区域
- 组件。一个细分的组件
思路还是很对我的胃口的，官方提供的物料源好看是好看，目前不是我想要的，能提供第三方接入才是正道。
接入自有组件
官方文档在此 https://ice.work/docs/materials/about
飞冰把这些素材称之为物料，我们接入自有组件称之为自建物料库。
接入物料库的大致流程：
- 安装物料开发工具
ice-devtools - 创建物料库，选择开发框架，react vue ng三选一
- 针对不同作用范围，开发 模板scaffolds，区块blocks，组件components
- 开发完成，npm发包
- 生成配置文件 materials.json
- 托管json文件得到url， fusion 和 unpkg 二选一，fusion会公开展示
- 软件中设置自定义物料源。
第四步要求npm发包我就已经不能接受了，更不用说第六步托管了。
自建，私有才是王道。
一些经验
我使用 nrm管理npm源，但cnpm源是只读的，不能发包，这就导致我安装依赖使用cnpm，发包publish 切换成官方源，这个是我的问题，只需要注意npm源是官方的就行。
飞冰支持react，支持vue，也支持 element，本质上飞冰是放代码片段的地方，不挑依赖。
如果你是react新手，vue新手，不会写jsx，不会写vue，恭喜你，你知道了一个完美的学习平台：
里面有大量的模块化组件可供学习：比如这个https://github.com/ice-lab/react-materials/blob/ede46af98ef9d0b7b304e635ca4b298acbf803a6/scaffolds/ice-operation-admin/src/pages/View/index.jsx
比如想知道hooks的应用：
后来补充：
通过ice-devtools来创建自定义物料库。
物料库根据不同颗粒度，区分为：
- 小组件 component
- 中区块 block 理解为更复杂的组件，由多个组件组合形成，可以修改配置，二次加工
- 大项目 scaffold 考虑布局，常见页面，路由等
安装
npm i -g ice-devtools@latestidev -V #2.4.1
使用流程
- 初始化 idev init
- 添加物料 idev add
- 物料开发
- npm发布
- 生成资源 dev generate
- 发布物料 idev sync
- 添加物料源
1 初始化
创建目录并执行
idev init
- 选择类型，vue
- 选择 scope ，我这里填写的是私有库 @zdwx
- 选择名字 base
- 添加描述
2 添加物料
idev add
根据提示选择
3 物料开发
进入物料文件夹，执行 npm i，然后 npm start
开发完执行 npm publish，会自动执行 npm run build 和 npm run screenshot
因为要考虑发到私有仓库上，可以单独执行，cnpm publish
生成 物料json npm run generate
若有收获，就点个赞吧
0 人点赞
