数据管理平台包含了多个后台项目,后台项目均使用vue作为开发框架。
子项目存在公共头部,需要统一管理维护。
子项目存在公共的依赖(如vue、vuex、vue-router等),公共依赖包可以统一维护。
子项目存在公共存在公共的配置文件例如需要统一维护。
使用thinkjs统一维护每个项目的,并为头部注入用户信息,并且单独构建一个common项目,统一维护第三方依赖。
存在的利弊:
配置繁琐
打包效率高
灵活性好
只需维护一个html文件
common配置介绍,打包主要配置介绍:
web将vendor依赖中的库、文件打包(依赖的库取的是的值)
extract-text-webpack-plugin将css单独提取出来,打包成一个.css文件
assets-webpack-plugin将web打包生成的文件的文件名保存为一个.json文件。方便子项目引用。
optimize-css-assets-webpack-plugin压缩打包后的.css文件
vue-cli3的配置文件被封装在了npm模块@vue/cli-service 中可使用vue inspect > ou进行查看
web将第三方依赖的索引id与对应的第三方依赖具体位置告知webpack
add-asset-html-webpack-plugin将common中生成的bundle-con文件中的依赖文件注入html-webpack-plugin的模板中
如果各自项目的打包依赖分布在各自项目中,依然会增加维护成本以及依赖安装的打包成本。这里就需要理解node查找依赖的逻辑。通过module.paths可以看到node查找依赖时的顺序。
node会从当前目录的node_modules一级一级的向上查找,所以我们只需要将所有依赖安装在common和vue的父级目录即可。