发布物料源
生成数据
物料包开发并发布完成，在物料项目根目录执行：$ iceworks generate 可生成物料源的数据到 build/material.json 文件。命令行是根据物料项目的 package.sjon 和单个物料中的 package.json 文件来生成这些信息的。生成的数据中包含了开发工具需要用到的物料源信息：
-
物料源的名称
name和描述description -
什么类型的物料源
type：React/Vue/Rax -
有哪些物料集合：blocks/page/components/scaffolds
-
单个物料的信息：
-
名称和描述
-
所属分类：
categories -
主页：
homepage -
代码源：
source-
依赖的包：
dependencies -
截图：
screenshot
-
发布数据
在物料项目根目录执行 npm publish 将物料源发布到 npm ，得到 npm 的 CDN 托管服务 unpkg 的 URL 地址。发布到 npm 本质是希望将 material.json 托管到 unpkg，这样就能通过 unpkg 服务得到物料源的 URL 地址。
也可以将物料数据发布到 阿里巴巴物料中心。不管是将物料数据托管到阿里巴巴物料中心还是 unpkg，本质上都是要有一个 URL 来让开发工具通过 HTTP GET 请求获取物料数据，因此，除了以上方式，你也可以将物料数据的 JSON 文件放到你的 CDN （例如阿里云 OSS）或在某个后端接口中返回该 JSON。
如何使用物料？
物料使用环节，核心是如何让使用物料更简单更高效。我们的开发工具 Iceworks 对 VS Code 进行了集成，只需要安装插件https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks，就可以在编辑器中可视化地使用物料搭建前端应用。使用流程如下：
设置物料源
Iceworks 默认提供了官方的物料源来快速开始。对于打造定制物料源的业务链路，可以通过设置将定制物料源添加到 Iceworks。
-
有两种方式打开设置面板：
-
点击 VS Code 左侧活动栏的 Iceworks 图标，再点击快速入口视图中的「设置」；
-
通过快捷键
⇧⌘P唤起 VS Code 命名面板，在输入框中输入：Iceworks:设置。 -
在设置面板中点击自定义物料源右侧的「添加」按钮，输入物料源名称和地址，点击「确定」。
物料源的使用高度依赖 npm ，因此设置中提供了 npm 客户端和镜像源的设置。
组件&区块
日常开发需要查找需要的组件，可以通过以下方式快速查找组件的文档和示例：
-
查找所有组件的文档和示例：
-
点击 VS Code 左侧活动栏的 Iceworks 图标，再点击快速入口视图中的「查找组件」；
-
通过快捷键
⇧⌘P唤起 VS Code 命名面板，在输入框中输入：Iceworks:查找组件； -
查找当前文件中用到的组件的文档和示例：
-
在编辑窗口点击鼠标右键，在右键列表中选择「Iceworks: 查找当前文件的组件」；
-
通过快捷键
⇧⌘P唤起 VS Code 命名面板，在输入框中输入：Iceworks:查找当前文件的组件； -
查找当前代码行组件的文档和示例：鼠标停留在组件使用处，在出现的悬浮框中点击「xxx 文档」。
然后是区块的使用。区块在物料源中，是以源代码的形式存在的。在开发工具侧，我们提供了物料面板，一键将区块（组件）添加到项目，操作流程和演示
区块的上一级粒度是页面，因此当前限定区块只能添加到页面文件中，所以需要先打开页面的入口文件 page/*/index.*；
当前物料面板中默认展示了所有的物料源，需要先选择需要使用的物料源
Iceworks 将插入组件&区块代码并自动引用区块&组件，下载区块源代码，安装需要的依赖包。下面的流程图描述了 Icework 在添加区块的内部处理过程。通过流程中，即可理解到为什么在物料源中，区块不需要通过 npm install 的方式进行使用，还是需要发布 npm ：原因是开发工具将 npm 镜像源当做了代码托管平台。
页面模板
页面级物料是通过模板的形式来承载的。在开发物料时，编写的是模板和配置描述。在实际使用时，物料源中的页面模板配置将在前台生成表单，开发者通过填写表单的方式配置模板，使用模板代码来生成页面。