react+ant-design+icejs项目——01.搭建ice.js+antd项目

01.搭建react+ant-design+icejs项目

01.搭建react+ant-design+icejs项目

---

---

前言

最近开发的项目随记

---

一、了解并使用飞冰

飞冰官网：https://ice.work/

关于飞冰
特性
React 研发框架：通过 icejs 研发框架集成目录规范、路由、状态管理、样式、权限管理、微前端等最佳实践
可视化智能开发助手：通过 VS Code 插件集合 Iceworks 简化前端工程复杂度，提供可视化、配置化等能力
丰富的物料：基于物料拼装提高项目开发效率，同时提供丰富的 React/Vue 物料
自定义物料：不同团队可基于物料开发工具快速开发构建私有的物料体系
核心能力
ice.js
开箱即用的 React 研发框架
提供 React 项目开发的最佳实践，包含工程配置、路由、状态管理、数据请求、调试日志等解决方案
开箱即用的工程能力，包含 TypeScript、Less/Sass/CSS Modules 等，无需关心繁琐的 webpack 基础配置
结合阿里业务沉淀的大量开发规范，包括目录规范、代码风格、单元测试等方面
约定优于配置的设计理念，让开发者能够更加专注于业务逻辑开发

---

二、使用步骤

飞冰官网：https://ice.work/

进入官网，找到antd 组件，根据操作创建项目，引入插件

ice.js提供了两种方法创建项目，以下介绍的是CLI脚手架创建方法。

1.创建项目

飞冰（ICE）官方提供了一套 antd 的脚手架，通过 CLI 即可直接创建：

$ mkdir icejs-antd && cd icejs-antd
$ npm ini ice --template @icedesign/ice-antd-scaffold

也可通过在 Iceworks 中添加自定义物料的方式使用，物料地址：https://ice.alicdn.com/assets/materials/antd-materials.json 。

2.运行项目

npm install

npm start

3.安装插件

代码如下（示例）：

$ npm install build-plugin-antd --save-dev

4.安装插件

在build.json文件中配置

插件提供了按需加载和主题定制相关的配置参数：
themeConfig 设置替换主题颜色
importOptions 同 babel-plugin-import 按需加载配置，默认参数 { libraryDirectory: ‘es’, style: true}，根据用户设置进行合并。

因为现在开发的项目定制化较高，所有全局样式配置都在build.json文件中配置。以下就是简单测试。

{
  "plugins": [
    ["build-plugin-antd", {
      "themeConfig": {
        "primary-color": "#1DA57A"
      }
    }]
  ]
}

---

总结

ice.js搭建项目是超级方便的，感兴趣的同学可以好好研究一下。