导语
优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。
连载第四十二期
《高级指引：定制 Bricks》
▽
优维提供了大量的 原子构件包 及 业务构件包，在大部分场景下，你都可以直接使用，无需自己编写构件包。但如果是特殊页面，你也可以自行编写定制构件包
定制化 brick 意味着要做代码编写，如果之前没创建 next 仓库，请先按"基于构件框架的代码开发"的入门指引创建，如果已经创建请按如下操作进行：
# 创建一个新的构件包
运行 yarn yo
选择 a new package of bricks
输入构件包名称，例如 hello-bricks
输入第一个构件的名称，例如 hello-bricks
执行 yarn
运行 lerna run start --scope=@bricks/hello-bricks 以启动构件包的实时构建（ lerna 版本要求^3.18.4）。
构件包的目录就已经初始化好了，并且包含了一个初始构件hello-bricks.hello-bricks了，该构件已经可以使用，
注意：构件包为点分法命令，第 1 级为 brick package ，第 2 级为 brick
打开两个命令窗口分别运行：
yarn start --scope @bricks/hello-bricks
yarn serve --remote --server YOUR-EASYOPS-SERVER-IP --local-bricks=hello-bricks
如：
我们可以有两种方式来看该构件的效果：
●在本地的开发者中心查看，访问 http://localhost:8081/developers/debug ，并在调试窗口输入截图所示 json，效果如下：
我们推行构件与编排分离，在开发一个构件的时候，跟编排需求方明确构件所需的属性及事件，然后独立开发调试，而不是直接在微应用下直接调试。
当然，如果你实在想看到开发出来的构件在微应用页面下的效果，你也可以在可视化编排 next-builder 下配置上你的构件（注意，因为还没发布，故 add brick 的时候是不能下拉选择的也没有文档，但没关系直接输入配置上就好），Build & Push，然后访问 http://localhost:8081/your-micro-app-uri 对应的页面即可看到效果。
● 如果你本身是通过"基于构件框架的代码开发"来编排产品的，也可以把该构件加到你本地的 storyboard.json，即可看到。这里依据开始入门创建的 hello-world 这个 micro-app 来做示例说明：
1.首先，你得修改下 remote 那个构件命令，加上--local-micro-apps，如
yarn serve --remote --server YOUR-EASYOPS-SERVER-IP --local-micro-apps=hello-world --local-bricks=hello-bricks2.修改 micro-apps/hello-world/storyboard.json 以使用新构件：
{ "routes": [ { "path": "/hello-world", "bricks": [ { "brick": "hello-bricks.hello-bricks" } ] } ]}
3.刷新浏览器，我们就可以立即看到新的构件效果：Hello Bricks works!。
# 目录说明
yarn yo 脚手架会自动生成如上目录。bricks 目录下第一级是 brick package（如 hello-bricks），然后是一个个 brick（如 hello-bricks.hello-bricks）。其中 brick 目录下，会自动生成 index.tsx 和 BrickName.tsx（如 HellBricks.tsx，大写驼峰命名），一般 index 声明属性定义和事件输出，而 BrickName.tsx 则写业务逻辑。
注：i18n 是用来做国际化的，brick next 框架从开始开发就考虑了国际化的支持。
# 创建一个新的构件
运行 yarn yo
选择 a new brick
选择所在构件包，例如 hello-bricks
输入构件的名称，例如 world-index
新的构件基本文件就已经初始化好。我们稍微修改下构件显示的内容，编辑 bricks/hello-bricks/src/world-index/WorldIndex.tsx 修改组件显示的内容：
export function WorldIndex(): React.ReactElement { const { t } = useTranslation(NS_HELLO_WORLD);
return <div>{t(K.HELLO_WORLD)} works great!</div>;}继续修改 storyboard.json 使用新构件 world-index 看看效果。
{ "routes": [ { "path": "/hello-world", "bricks": [ { "brick": "hello-bricks.hello-bricks" }, { "brick": "hello-bricks.world-index" } ] } ]}
# 将开发好的构件推送到开发集成环境
这里好的习惯应该通过开发流水线来完成，git push 的时候，自动 build 然后将 brick 包推送到开发集成环境。
- end -
