vue多项目|多工程共用相同组件思路

  • Post author:
  • Post category:vue




项目场景:


简单介绍一下目前的项目场景,目前我们有三个vue工程,就是三个vue项目,但是每个项目都有自己的基础组件库,但是这些自己封装的组件库都一样,都是CV过去的,但是现在产品不稳定,这些基础的组件库可能会总改,那么问题就来了,我每次难道都要改三遍吗?那也太费劲了,所以研究了一下如何在多个vue项目共用一套基础建设的组件,这样我就改一次就行了,不需要改很多次了。




npm简介:

  • npm全称是node package management,接触过node知道,它是node的包管理工具,我们平时使用的npm install <安装的包名>,都是那些作者把自己的项目发布到Npm上,你才能够install安装它,我们这个场景也可以,我把公共的组件抽出来弄成一个工程,完了发布到npm上,以后用的时候直接npm install就可以了。但是我放弃了这个选择,因为每次改动都得改版本重新发布很麻烦。

    npm文档
  • 但是这里要介绍一下发布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,所以这个对生产环境的打包影响近乎为零。



拓展

  1. 你可以通过这种方式进行多个工程共用同一个依赖,是最简单的方式,但这只适合小的团队使用。
  2. 你还可以用npm install +路径的方式 ,把需要依赖的项目装到node_modules里,但感觉这种没npm link好用,每次更新公共依赖的代码,都需要install一下。
  3. 你还可以把公共依赖发到npm上,这个是最正规的,但是我觉得太麻烦,如果团队大的话这么做我觉得挺合适的。
  4. 你还可以用npm install +git网址的方式,npm install 支持http,https.等等的方式,这里建议去看一下我最上面提到的Npm官网。

  5. 更多方式点我



版权声明:本文为weixin_46773434原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。