《高级指引：定制 Bricks》

▽

优维提供了大量的 原子构件包 及 业务构件包，在大部分场景下，你都可以直接使用，无需自己编写构件包。但如果是特殊页面，你也可以自行编写定制构件包

定制化 brick 意味着要做代码编写，如果之前没创建 next 仓库，请先按"基于构件框架的代码开发"的入门指引创建，如果已经创建请按如下操作进行：

# 创建一个新的构件包

1. 运行 yarn yo

2. 选择 a new package of bricks

3. 输入构件包名称，例如 hello-bricks

4. 输入第一个构件的名称，例如 hello-bricks

5. 执行 yarn

6. 运行 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-bricks

2.修改 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 框架从开始开发就考虑了国际化的支持。

# 创建一个新的构件

1. 运行 yarn yo

2. 选择 a new brick

3. 选择所在构件包，例如 hello-bricks

4. 输入构件的名称，例如 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 -