前端模块化知识准备:Vue远程模块

综述

越来越多的要接触中台改造的业务，在改造过程中,与服务端的业务细化和下沉相匹配的是，前端也需要对重复的业务进行精炼和下沉。当然，这也是前端中台项目的特点。

改造期间，就会涉及到组件的复用。在单一项目中，组件的复用是相对容易实现的。但是在多项目中的组件复用，就需要相当的规划能力。

最近公司的项目就向我们提出了这样的要求。相对的，我也需要整理相关的知识点以支撑这个目标。

首先要实现的是，同一个组件在不同项目中的复用。

公司的项目大量的使用Vue框架, 那么我们就需要通过Vue远程加载组件的能力。

Javascript天然就拥有动态加载远程组件的能力，所以可行性倒不是我们担心的问题。

我们可以通过使用Vue CLI可以将我们的vue组件，打包成对应的js bundle文件。Vue CLI的组件的构建命令的格式如下:

vue-cli-service build --target lib --name myLib [entry]

其中，myLib 是具体的组件名称， [entry] 是对应的Vue组(也就是对应的Vue文件)。

执行这段命令，Vue CLI工具会将我们的对应的Vue组件，打包成JS Bundle文件。通过在 index.html 文件中script标签，可以将组件引入到我们的项目中。

开发远程组件

综合这些信息，除了模块划分过程以外，我们使用远程模块的流程总体来说可以分为以下三个步骤:

开发组件。
发布组件。
调用组件。

开发组件

我们通过一个例子来看如何模拟远程的组件调用，首先我们通过Vue CLI 创建两个项目,项目名分别为remote-lib和remote-client。其中,remote-lib就是我们要用于远程访问的组件, 而remote-client就是我们用于调用远程组件的载体。

创建指令如下:

vue create remote-lib
vue create remote-client

在remote-lib项目中，我们的 ./src/componets/ 文件夹下有一个 HelloWorld.vue文件。通过修改组件代码，我们希望它能够显示:

When you see this, the remote should work!
Hello remote;

这样两行字，所以代码如下:

<template>
  <div>
      When you see this, the remote should work!
      <div>
        Hello remote;
      </div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld'
}
</script>
<style scoped>
</style>

发布组件

编码完成后, 我们希望将它单独发布为名为 remoteHello 的组件。那么对应的命令是:

vue-cli-service build --target -lib --name remoteHello ./src/components/HelloWorld.vue

打包后会在remote-lib项目中的dist文件夹下生成3个js文件:

remoteHello.common.js
remoteHello.umd.js
remoteHello.min.js

这四个文件就是对应的组件导出。
其中, '.common.js' 文件对应的是Common JS的模块定义。 "umd.min.js" 和 "umd.js" 对应的umd规范的模块定义。考虑到Vue框架对Common JS的支持并不好，所以，我们使用的是 "umd.min.js" 和 "umd.js"。
通过使用 http-server (node项目常用工具), 我们暂时模拟将他们发布到地址:

http://127.0.0.1:8080/

这样，我们的远程组件的打包和发布就完成了。

调用组件

前面我们已经将组件发布到了 http://127.0.0.1:8080/emoteHello.umd.min.js，接下来就应该要应用组件了。首先我们需要引入对应的js文件。打开index.html模版，在body中加入对http://127.0.0.1:8080/emoteHello.umd.min.js的引用:

<!DOCTYPE html>
<html lang="en">
  <!--其他代码...-->
  <body>
    <script src="http://192.168.6.27:8080/remoteHello.umd.min.js"></script>
    <!--其他代码...-->
  </body>
</html>

接下来我们就需要使用组件了。
这里需要注意的一点是，当我们引用了js文件之后，remoteHello 组件被挂载在了window对象下面, 也就是 <font color="#aacc00">window.remoteHello</font>。所以当我们在Vue页面中引用时实际上应该是按照下面这个写法执行:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <remoteHello></remoteHello>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
    remoteHello:window.remoteHello
  },
}
</script>
<style>
</style>

运行项目后，就可以看到我们想要显示的信息了:

截屏2020-09-21 下午3.11.11.png

如果需要控件间数据通信，大家可以参考: Vue官网关于Props和自定义事件的说明。

最后

在这个场景下，我们需要注意的有下面两个点：

因为引用的是JSBundle, 而不是 iFrame模式, 远程组件在调用后，如果涉及到网络请求，Origin 和 Referer 所指为容器的地址。
要避免CORS，在开发过程中，需要事先在API Server上配置白名单。

如果有 baselib 这样的设计，并且在远程组件中调用了，会被打包进远程组件，设计时要考虑多远程组件调用时，不会相互覆盖。