ynet-mf v1.2.11

ynet-mf

它基于webpack5的模块联邦，所以项目构建请使用最新版本的@vue/cli构建

此外，它对目录结构有所约束，该约束可以通过修改配置文件进行修改：

• src/common 公共模块
• src/portal 主模块
• src/modules/* 其他模块

配置文件可以是在项目根目录下package.json中的mf属性中进行配置，或者在ynet.config.js文件中进行配置

"mf": {
  "singleton": [
    "vue",
    "vuex",
    "vue-router",
    "vue-i18n"
  ],
  "commonExposesDirs": [
    "utils",
    "components",
    "decorators"
  ],
  "modules": {
    "portal": "innermanage"
  }
}

这里来对配置属性一一介绍

• portalPath 类型为string， 主模块路径 默认是src/portal

• commonPath 类型为string， 公共模块路径 默认是src/common

• modulesPath 类型为string， 子模块集合路径 默认是src/moudles

• enable 类型为boolean， 是否开启module federation, 默认开启，如果关闭就作为一个正常的@vue/cli项目

• cache 类型为boolean， 是否开启webpack缓存，开启之后能够极大的提升webpack的启动和构建速度, 默认开启

• commonExposesDirs 类型为string[] 公共模块需要暴露给外部使用的目录， 配置这个后，会将目录下所有的js|ts|jsx|tsx|vue暴露给外部使用，默认暴露['utils', 'components']

• comonExposesPattern 类型为string， commonExposesDirs存在一定的局限性，为了更加灵活的配置暴露外部的文件，可以通过配置comonExposesPattern 来实现，该属性遵循的是glob的查找规则，可以把glob匹配的的文件暴露给其他模块使用

• comonExposesIgnoreExt 类型为regExp， 默认值为/\.ts$/，通过我们在引用模块时会忽略ext后缀，这个作用就是配合忽略后缀使用的

• modules: 类型为object， 模块名称替换，替换模块打包出来的名称

• singleton 类型为string[]， 使用规则可以见webpack module federation的singleton配置 全模块设置

• remotes 类型为object, 使用规则可以见webpack module federation的remotes配置, 全模块设置

• remotesCache 类型为boolean， 默认开启，在我们请求其他模块的文件时，例如我们请求公共模块下的内容，会经过common/js/common.js，但是由于打包出来的该文件没有hash，所以它的内容可能被浏览器或代理服务器缓存，所以开启该选项后会在引用其他模块的入口文件上加上时间戳来清楚缓存

• configName 类型为string， 默认为ynet.config.js 该文件的为模块的私有配置文件，目前的作用在于对自身的webpack module federation进行配置

• searchModulesPattern 类型为string， 也是glob的参数，用途在于定位子模块所处的位置，默认是为*/ynet.config.js, 它会查找子模块目录下的所有具有ynet.config.js的目录当作子模块

• singleWebpackPlugins 类型为string[]， 在我们配置根目录下的vue.config.js时，我们可能会用到vue.config.js的webpack插件，这些插件会在每个模块中使用，正常情况下时没问题的，但是有些插件可能只需要开启一个就好，开启其他的可能会影响我们的项目性能或导致其他的一些问题出现。所以要在其他模块中对插件进行移除，默认值为['fork-ts-checker']

• singlePlugins 类型为string[]， 效果类似与singleWebpackPlugins不过它不是处理webpack plguin，而是处理vue plugin，让全局的vue plugin只生效一次，默认值为['vue-cli-plugin-mock']

• autoShareDependencies 类型为boolean， 自动将根目录的依赖共享给所有模块

• ignoreShareDependencies 类型为string[]，在autoShareDependencies开启时，设置忽略需要共享的依赖

• openInlineRemote 类型为boolean，是否开启内联模式remote

• handleMiniCssPublicPath 类型为boolean，是否自动处理minicss的publicpath

此外，可以在出了根目录，还可以在各个目录下配置自己私有的环境变量和vue.config.js配置，但vue.config.js配置中的一些属性会不生效。

可能遇到的问题

公共模块会默认将package.json的dependencies中的依赖进行收集，其他模块不会对这些模块进行重复的下载引用，可是这会出现一种情况，模块在公共模块中没有被消费使用，所以在其他模块中就可能导致依赖无法找到的问题

我们可以通过公共模块中进行引用消费

/** 全局引入 */
import('vuex-module-decorators')

我们同样可以开启monorepo来实现依赖在模块中单独的引入

不只是模块拆分

可能开发者仅仅把该模式当作一个模块拆分的应用来使用，进行增量发布，但是它有有着更加灵巧的设计

由于它基于Module Federation，它能做到的事情比我们所要预期的还要多

这里我们给出一个示例:

把公共模块单独打包，供所有开发者使用

公共模块体积很大，它集中了一些共有的逻辑和依赖，我们通过远程引用它，而不参与我们开发的构建中，能够极大的提升我们的项目启动速度

1. 将公共模块进行启用

# pnpm
pnpm serve --common

# yarn
yarn serve --common

# npm
npm run serve --common

2. 找到我们公共模块的启用地址

这里我们给出一个入口示例的地址 http://localhost:8080/common/js/common.js

3. 进行配置

我们在项目根目录下创建ynet.config.js文件，配置如下

module.exports = {
  remotes: {
    common: 'common@http://localhost:8080/common/js/common.js'
  }
}

4. 对模块进行启动开发

# pnpm
pnpm serve --portal --modules [模块名称]

# yarn
yarn serve --portal --modules [模块名称]

# npm
npm run serve --portal --modules [模块名称]