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，所以这个对生产环境的打包影响近乎为零。

拓展

你可以通过这种方式进行多个工程共用同一个依赖，是最简单的方式，但这只适合小的团队使用。

你还可以用npm install +路径的方式 ，把需要依赖的项目装到node_modules里，但感觉这种没npm link好用，每次更新公共依赖的代码，都需要install一下。

你还可以把公共依赖发到npm上，这个是最正规的，但是我觉得太麻烦，如果团队大的话这么做我觉得挺合适的。

你还可以用npm install +git网址的方式，npm install 支持http,https.等等的方式，这里建议去看一下我最上面提到的Npm官网。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论