阿里飞冰的介绍以及使用

关于飞冰

官网链接：https://ice.work/

react物料git地址 https://github.com/ice-lab/react-materials

vue物料git地址 https://github.com/ice-lab/vue-materials

飞冰（ICE）诞生于阿里巴巴内部大量的中后台业务，我们在中后台场景沉淀了大量的物料、工具及经验，同时也抽象出一套从物料到项目的完整开发流程。如果你符合以下两种场景之一，那么欢迎了解下飞冰（ICE）体系

如果你所在的团队使用 React 开发前端项目，那么你可以最大限度的发挥飞冰（ICE）的能力：丰富的物料体系、完善的工程构建工具、GUI 开发能力，甚至你也可以定制私有的物料体系。

如果你所在的团队使用 Vue 或者其他框架开发前端项目，那么你可以基于飞冰（ICE）的工具体系开发私有的物料体系，然后通过可视化开发工具串联使用。

由于 ICE 优先使用 React 16+，其需要的最低 IE 版本为 11，如果您需要在以下的版本使用，您可能需要引入一些 polyfill 来支持 Map, Set 等特性

 

ICE（面向对象中间件）

网络通信引擎ICE(Internet Communications Engine)是Zero C公司的分布式系统开发专家实现的一种新的高性能的面向对象中间件平台。从根本上说， ICE 为构建面向对象的客户-服务器应用提供了工具、 API和库支持。

 

飞冰的物料主要分为三类：模板、区块、组件

模板

样板工程，通常会包含通用的布局、常用页面、工程配置等，常在初始化项目时使用

飞冰物料源（默认是react的） 35个

vue物料源 2个

angular物料源 1个

自定义模板：自己奢姿主题色调，布局

区块

与组件相比灵活性较高，功能相对比较简单，对应代码量也比较少，业务里会将区块的代码复制到项目里使用

 

组件

基础组件：同一公司同类业务应该只有一套基础组件，基础组件需要足够原子化以及灵活性，比如 Button, Menu 等

业务组件：面向业务的组件体系，一般功能比较确定同时复杂度较高，业务里通过 npm 依赖使用，不可随意更改业务组件代码

 

构建项目

1、基于ice-scripts 命令行构建（目前只支持react）

ice-scripts 是飞冰（ICE）React 链路的工程工具，类似 Vue CLI 之于 Vue 的关系。ice-scripts 提供了丰富的功能帮助我们开发 React 项目：

• 完善的命令行工具
• 支持项目/业务组件/区块的开发&构建
• 基于 Fusion 体系的主题配置
• 完善的自定义 webpack 配置
• ……

ice-scripts详细地址：https://ice.work/docs/cli/about

 

2、通过GUI工具Iceworks构建（支持，react、vue、angular）

创建项目教程地址 https://ice.work/docs/iceworks/about（还有工程管理，提交git）

windows、mac版本都有工具

构建vue项目步骤：

1、安装Iceworks，安装地址：https://ice.work/iceworks

2、模板-->vue物料源-->自己想要的模板-->使用模板（包含模板中的页面）

新建页面（点击工具上方添加页面选项，选择自己想要网页面中放入的区块，然后生成页）

在页面中添加区块，步骤跟新建页面基本一样；选择想要的区块下载，不会生成新的页面，只是添加到原有页面中

启动 对应vue的 npm run dev

构建 对应vue的 npm build （生成dist文件）

自定义模板------->使用 ice-devtools 开发自定义物料

自定义开发文档地址：

https://ice.work/docs/advanced/custom-materials

https://ice.work/docs/materials/init-dev

ice-devtools 用于物料的开发和管理，其本身不耦合任何前端框架或工程体系，这意味着基于 ice-devtools 可以开发 React/Vue/... 各种前端体系的物料。ice-devtools 具有以下特性：

• 支持物料的初始化以及管理能力
• 支持不同前端框架或工程的物料开发
• 支持同步到 fusion.design（仅支持 React 物料） 或 unpkg（支持任何物料）
• 支持业务自定义模板能力
• ……

官方提供了react/vue的物料模板，react/vue用户可以直接基于这两套模板初始化

react参考：https://github.com/alibaba/ice/tree/master/templates/ice-react-material-template

vue参考： https://github.com/alibaba/ice/tree/master/templates/ice-vue-material-template

创建自定义物料

第一步：安装并创建项目

创建项目

$ npm install ice-devtools -g

$ mkdir xxx && cd xxx

$ ice-devtools init

区块预览

$ cd my-project/blocks/ExampleBlock

$ npm install

$ npm run start

模板预览

$ cd my-project/scaffolds/ExampleScaffold

$ npm install

$ npm run start

第二步：发布到npm官网 进入到blocks目录下的ExampleBlock -> npm publish .

第三步：生成物料数据 回到根目录下执行，生成一个build文件，生成的物料源数据就在build里面 $ npm run generate

第四步：目前这只是一份静态数据，想要在 iceworks 里使用这份物料的话需要参考下文将其托管到某些服务上生成一个 url。支持同步到 fusion.design（仅支持 React 物料） 或 unpkg（支持任何物料）

第五步：添加到 Iceworks 内； 设置->自定义物料源->新增->输入第四步生成的物料地址

 

 

谁在使用

• 淘宝中后台业务
• 飞猪中后台业务
• 阿里健康
• 村淘
• 优酷
• 阿里云
• ……