多项目集成下的工程脚手架配置方案

作者 : yanyan 本文共1493个字,预计阅读时间需要4分钟 发布时间: 2022-04-30 共11人阅读

随着项目的复杂和功能的增加,一个工程下可能存在多个项目,这个时候我们单独开项目去开发的话项目代码会冗余,项目后期的维护成本也很高,而代码的冗余会造成静态资源包加载时间变长、执行时间也会变长,进而很直接的影响性能和体验。为了解决此问题我们需要实现多项目的分模块打包,且项目之间共享组件和依赖,运行、打包时互不干扰。以一个后台管理系统为例,我们同时有运营管理系统、商家管理系统、设备管理系统,还有一些内部的管理系统,这几个系统的菜单管理、权限管理、用户管理等相同业务模块较多,业务组件以及UI组件都要遵循公司的规范,这种情况下就可以用一个repo来管理这些系统, 所有的设计文档、源代码、文件都放在一个repo里面。本文基于vue-cli3,核心是vue.config.js文件。vue-cli2实现方法类似,核心是webpack.config.js文件,这里不做过多阐述。我们知道在package.json中有项目启动、打包的命令,我们可以从这里入手。我们的思路大概是这样的:好了,我们的视图目录结构大概就是上面的样子,我们期望的是打包src目录下这个A项目就像打包一个完整的项目一样。那么如何实现这部分呢?这里就不得不提到cross-env这个模块,我们之前在生产、沙箱、测试、开发环境时也会用到这个命令。代码:此版本为简易demo,配置完运行命令和打包命令我们就可以编写项目中的业务代码了。路径:src/projects/projectA/App.vue路径:src/projects/projectB/App.vue在项目根目录建立config文件夹,在其中新建projectsConfig.js写入:开始前先讲下process.argv它返回的是一个数组,其中包含启动 Node.js 进程时传入的命令行参数。第一个元素将是process.execPath, 第二个元素将是正在执行的 JavaScript文件的路径,其余元素将是任何其他命令行参数。Tips:命令行参数是固定格式npm run dev projectA,少了项目名称会提示项目不存在。这里就比较简单了,根据当前项目名称进行打包即可配置终端插件的效果图:写到这里我们就建立一个完整的小vue项目了,我们运行看看效果:如图:live-server是一个具有实时加载功能的小型服务器,在项目中用live-server作为一个实时服务器查看开发的网页或项目效果优点:缺点:有兴趣的童鞋可以考虑以下两个问题:通过以上的分析,我们应该对同一工程下多项目配置化打包的大概流程有基本的了解,而上边的方案也只是其中的一种实现方式。写本文的目的主要是给大家提供一种思路,以后在遇到工程需要定制化的时候就可以通过更改脚手架的配置来实现。Demo:[https://github.com/licairen/multi_project_demo](process.argv: http://nodejs.cn/api/process/process_argv.htmlcross-env: https://www.jianshu.com/p/ecf1a4130addfs-extra: https://github.com/jprichardson/node-fs-extrachalk: https://github.com/chalk/chalkinquirer: https://github.com/SBoudrias/Inquirer.jsnode-progress: https://github.com/tj/node-progress#options

大鱼模板-聚集各类精品网站模板(织梦模板,WordPress主题,商城模板),小程序模板(禾匠商城,狮子鱼社区团购,各类小程序工具)。欢迎各位作者提交优质源码,享有高额佣金。
【大鱼模板】 » 多项目集成下的工程脚手架配置方案

常见问题FAQ

提供最优质的资源集合

立即查看 了解详情