ice 又名，飞冰。海量可复用物料，通过 GUI 工具极速构建中后台应用。是阿里巴巴前端团队最近开源的一个产品，仅仅一天的时间，就收到了2800多个 star。本文介绍它的一些简单用法。

飞冰的特点

⚡️ 海量高质量物料： 每周有新增，专业视觉设计，海量物料满足你开发之所需。

🎯 GUI 工具： 零配置的工程整合，物料可视化一键导入复用。

🎨 ICE DESIGN 设计语言： “冻”人的中后台设计语言。

在 ice 的官网上，我们发现有非常多的案例模板，或者称为模块更为合适。像是模块化开发一样，你所需要的所有功能基本上都能在官网中的块列表中找到。

项目开发和使用方式

下载 Iceworks 并创建项目，然后创建页面进行物料搭建组合，之后可以打开编辑器进行二次编码，完成之后点击构建即可打包出可用的 JS、CSS bundle。

详细步骤请参见文档：Iceworks 快速上手。

物料开发和发布方式

首先 clone 当前仓库，开发完成之后提交 PR 合并后执行下面相关命令：

  • npm run bootstrap 初始化 Lerna
  • npm run lint 代码 Lint 风格检查
  • npm run publish 代码发布

零环境搭建

Iceworks 是 ICE 推出的辅助开发者快速开发中后台前端应用的 GUI 软件，目前支持 macOS 和 Windows 两大平台。通过 Iceworks 点击下载按钮即可。

创建项目

软件启动后，项目列表为空，可通过的【创建项目】新建一个项目。

阿里巴巴开源前端工具 ice飞冰简易教程-风君雪科技博客

界面会跳转到模板市场，目前提供三种模板进行选择，鼠标移动到指定的模板上，点击【以该模板创建项目】进入项目配置页面。

阿里巴巴开源前端工具 ice飞冰简易教程-风君雪科技博客

  • 新建一个文件夹或者选择已有的空文件夹（避免覆盖原有文件）。
  • 给项目起一个项目名，以便后续识别。

点击【开始创建项目】即可开始创建

默认会在创建的时候同时安装项目依赖，时间上会相对久一些，也可取消勾选，后续自行安装

管理项目

项目创建完成后，会自动添加到项目列表中，并打开当前项目管理面板。

通过项目管理面板，可执行 启动调试服务 新建页面 构建项目 等操作。

阿里巴巴开源前端工具 ice飞冰简易教程-风君雪科技博客

启动调试服务

点击 启动调试服务 等待完成后出现服务地址，点击可以预览当前项目。

阿里巴巴开源前端工具 ice飞冰简易教程-风君雪科技博客

上图是一个 Ice Design CMS 模板启动后的预览效果。

新建页面

启动调试服务后，可使用新建页面来搭建页面，通过 block 的组合完成页面的创建。

进入 block 搭建界面

阿里巴巴开源前端工具 ice飞冰简易教程-风君雪科技博客

上方列出了当前项目可用的 layout 布局方式，选中任一一个作为新页面的布局。

下方列出了当前可选择的 blocks, 点击即可选择该 block 到已选区块列表中。

右侧为选中 block 组合的缩略图预览。

选择 layout 以及 block 后，点击右下角生成页面，会提示输入页面名，路由名，可以定义需要的名称，

  • 页面名：表示生成的文件名称。
  • 路由名：表示页面的访问地址，可通过 http://127.0.0.1:4444/#/xxxx 访问到对应的路由页面。

示例中，创建了 page16 访问后即可看到刚搭建的页面了。

阿里巴巴开源前端工具 ice飞冰简易教程-风君雪科技博客

进入开发调试

点击项目版面上的 编辑中打开 会立即使用设置中选择的编辑器打开项目，目前支持 Visual Studio Code，Sublime Text 3，WebStorm 和 Atom 等编辑器，推荐使用 Visual Studio Code，如果你的电脑中未安装请先安装。

项目目录结构说明：

project-name
├── build                                    // 打包资源
├── mock                                    // 模拟数据
├── public                                  // 静态资源
├── src
│   ├── components                          // 公共组件
│   ├── config                              // 公共配置
│   ├── layouts                             // 通用布局
│   ├── pages                               // 页面
│   ├── utils                               // 通用方法
│   ├── global.scss                         // 全局样式
│   ├── index.html                          // 入口模板
│   ├── index.js                            // 应用入口
│   └── routes.jsx                          // 路由入口
├── tests                                   // 测试
├── .editorconfig                           // 代码风格配置
├── .eslintignore                           // eslint 忽略目录配置
├── .eslintrc                               // eslint 配置
├── generator.json                          // generator.json
├── package.json                            // package.json
├── README.md                               // 项目说明
└── yarn.lock                               // 模板版本管理

例如上一步已创建的 Page16 页面：

阿里巴巴开源前端工具 ice飞冰简易教程-风君雪科技博客

通过二次开发增加业务逻辑，完成业务需求。

打包发布

点击项目面板上的构建项目按钮，将开发的构建出最终的 js css 等资源。

构建完成后，会在项目目录下生成 build 文件夹，里面存在了 index.html index.js index.css 文件。使用你熟悉的方式，上传到对应的 cdn 服务器。

阿里巴巴开源前端工具 ice飞冰简易教程-风君雪科技博客

部署上线

上线过程即发布 HTML 文件的过程，index.html 文件存在在 build 目录中，将 index.html 文件复制到对应的服务服务器，并修改 html 源码中的 /build/index.css 和 /build/index.js 地址，是上一步中得到的 cdn 地址以及站点标题。

一个标准的 HTML 文件如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
  <link rel="icon" type="image/png" href="https://www.xttblog.com/xxx/.../xttblog.png">
  <meta name="viewport" content="width=device-width">
  <title>ICE Design CMS</title>
<link href="./index.css" rel="stylesheet"></head>
<body>
  <div id="ice-container"></div>
  <script src="https://www.xttblog.com/xxx/.../react-dom.development.js"></script>
<script type="text/javascript" src="./index.js"></script></body>
</html>

在线上环境强烈推荐使用 production 版本的 React，而不是 development 版本。它们之间的区别除了体积之外，还包括一些针对线上环境的性能优化。