vue之多项目|多工程共用相同组件的思路解读
作者:搬砖怪
项目场景
简单介绍一下目前的项目场景,目前我们有三个vue工程,就是三个vue项目,但是每个项目都有自己的基础组件库,但是这些自己封装的组件库都一样,都是CV过去的,但是现在产品不稳定,这些基础的组件库可能会总改,那么问题就来了,我每次难道都要改三遍吗?
那也太费劲了,所以研究了一下如何在多个vue项目共用一套基础建设的组件,这样我就改一次就行了,不需要改很多次了。
npm简介
npm全称是node package management,接触过node知道,它是node的包管理工具,我们平时使用的npm install <安装的包名>,都是那些作者把自己的项目发布到Npm上,你才能够install安装它,我们这个场景也可以,我把公共的组件抽出来弄成一个工程,完了发布到npm上,以后用的时候直接npm install就可以了。但是我放弃了这个选择,因为每次改动都得改版本重新发布很麻烦。
但是这里要介绍一下发布npm包需要配什么东西,后面会需要这里的配置。
"name": "pub-fe" "version": "0.1.1" //项目版本 "description": "包描述" //这个包的描述 "main": "src/main.js", //入口文件,默认就是main.js "author": "wxs", //作者名字 "repository": { //npm去哪里拉去你的项目代码(这个后面没用上,) "type": "git", "url": "git+https://github.com/wangxueshun/pub-fe.git" } ``
具体配置
入口文件main.js
//main.js文件 import pubImp from "./packages/pubImp/index.js" //先把公共组件放在这个数组里,这里举列子就写了一个,有多少个就在数组里放多少个 const components = [ pubImp ]; //这里install方法主要是为了以后用vue.use()全局注册组件,因为是基础组件以后肯定常用,这样就不用每个页面都import了,这里不明白的建议百度。 const install = function (Vue) {//这个Vue参数,在Vue调用install方法的时候会把Vue传进去 //这里循环调用 components.forEach(component => { component.install(Vue); }); }; export default { install }
pubImp文件
我的公共组件工程的结构
pubImp下的index.js文件
import myButton from './src/main.vue' export default { install(Vue) { Vue.component("myButton", myButton) } }
现在共用的包已经写好了,那么怎么样才能在别的工程那样直接引入到项目中呢?
npm link
在本地开发npm模块的时候,我们可以使用npm link命令,将npm 模块链接到对应的运行项目中去,方便地对模块进行调试和测试
1.先到我们的公共包pub-fe中执行npm link
这时候我们的pub-fe这个文件会被连接到全局。
2.在需要pub-fe的地方引入它,执行npm link pub-fe,我的项目是spp-fe所以我以这个为例子
这个时候pub-fe就会映射到spp-fe中的node_modules中,以快捷键的方式。
3.这个时候我们就可以跟引入别的第三方模块一样,引入我们的pub-fe.
使用npm link的又一点好处就是,你依赖的包有更新的时候,可以及时响应,不像在npm上发布的包,每次想下载最新的包都得npm install一下。
探究
那么我这么引入会不会对打包有影响呢?让我们来探究一下。
一、执行npm run serve
我们看一下研发环境的打包方式会造成什么影响,我就直接上引入Pub-fe之后的打包图片了。
可以看到打出来的包pub-fe里引入进来了,它里面也会有一些node_modules和它的一些依赖文件,对包的体积影响还是有的,但是这个研发环境的打包,webpack对研发环境的打包方式跟生产环境的打包方式是不一样的,所以这个体积大就大了,我所谓就自己用。
二、执行npm run build 生产环境的打包方式
让我们看看引入Pub-fe之后对打包的影响。
可以看到这次的pub-fe中依赖的node_modules跟我们的项目都服用上了,不像在研发环境中他俩是两套node_modules,所以这个对生产环境的打包影响近乎为零。
拓展
你可以通过这种方式进行多个工程共用同一个依赖,是最简单的方式,但这只适合小的团队使用。
你还可以用npm install +路径的方式 ,把需要依赖的项目装到node_modules里,但感觉这种没npm link好用,每次更新公共依赖的代码,都需要install一下。
你还可以把公共依赖发到npm上,这个是最正规的,但是我觉得太麻烦,如果团队大的话这么做我觉得挺合适的。
你还可以用npm install +git网址的方式,npm install 支持http,https.等等的方式,这里建议去看一下我最上面提到的Npm官网。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。