注册 #

此章节假设你已经看过了插件基础。若你还不了解扩展插件是什么，请先阅读该章节。

扩展插件在使用前需要先被"注册"，这样 CoRenderCtor 渲染器才能在初始化时找到其对应实现。

实现 #

扩展插件的注册并不需要你手动去设置为表单的子组件，该操作将由平台接管并自动执行，当渲染器发现某个控件为扩展插件时，首先会根据使用的插件名尝试在 window 环境中获取对应的 umd 格式对象，之后再利用 h 函数渲染，同时会完成参数传递和事件监听。

假设我们配置了 HelloWorld 扩展插件，并将其放置在表单上，这里的渲染则为：

// vue render
return () => {
  // 首先从 window 中获取 HellowWorld
  const ExtendComponent = window['HelloWorld']
  // 用 vue 的渲染方法 h 加载扩展插件
  return () =>
    h(
      ExtendComponent.default,
      {
        /* 传入 props 参数， 绑定监听事件 */
      },
      {
        /* slots */
      }
    )
}

// vue render
return () => {
  // 首先从 window 中获取 HellowWorld
  const ExtendComponent = window['HelloWorld']
  // 用 vue 的渲染方法 h 加载扩展插件
  return () =>
    h(
      ExtendComponent.default,
      {
        /* 传入 props 参数， 绑定监听事件 */
      },
      {
        /* slots */
      }
    )
}

我们这里只展示了一个最基础的例子方便你理解平台是如何获取并渲染扩展插件，真实场景中此处会存在更多的细节处理。

引入 UMD 文件 #

我们已经知道，平台要想渲染扩展插件，需要从 window 中获取，那么在实际使用时，我们是如何将插件引入到 window 中的呢？

生产模式 #

在插件调试完毕且已经发布成功后，我们仅需要在构建平台的扩展插件管理中将指定插件安装即可，服务会自动将我们需要的文件引入到 window 环境内，无需手动配置。

开发模式 #

在 co-extension 开发插件时，提供了 dev:extensions 和 build:extensions 脚本供启动打包服务，程序将会插件打包并将产出输出到 /dist/extensions/ 下。

现在要将其引入 serve 服务的 window 环境下，仅需在入口文件 index.html 加入一行 script：

<script src="dist/extensions/HelloWorld/dist/index.js"></script>

<script src="dist/extensions/HelloWorld/dist/index.js"></script>

但这只是临时处理方式，之后如果再开发新的插件，A，B，C 等，要是每次都要手动修改引入，不仅繁琐更可能会产生错误，通过使用 build:script 脚本就能解决这个问题。

首先我们将入口引入改为：

<script src="dist/extensions.js"></script>

<script src="dist/extensions.js"></script>

这个地址是固定的，无论之后开发多少个插件这里都不会发生改动。此时运行 build:script，我们会发现 /dist/extensions.js 文件被创建了：

function createImport(type, href) {
  const elem = document.createElement(type)
  if (type === 'link') {
    elem.rel = 'stylesheet'
    elem.href = href
  } else {
    elem.src = href
  }
  document.head.appendChild(elem)
}

// A
createImport('script', 'dist/extensions/A/dist/index.js')
// B
createImport('script', 'dist/extensions/B/dist/index.js')
// etc...

function createImport(type, href) {
  const elem = document.createElement(type)
  if (type === 'link') {
    elem.rel = 'stylesheet'
    elem.href = href
  } else {
    elem.src = href
  }
  document.head.appendChild(elem)
}

// A
createImport('script', 'dist/extensions/A/dist/index.js')
// B
createImport('script', 'dist/extensions/B/dist/index.js')
// etc...

脚本遍历了所有插件，并生成各自的引入路径，入口再引入动态创建的内容，以实现自动化。

在开发时，运行 build:script 就能将 umd 产物引入到 window 中以完成安装。