前端模块化知识准备: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 这样的设计，并且在远程组件中调用了，会被打包进远程组件，设计时要考虑多远程组件调用时，不会相互覆盖。
