vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue多项目|多工程共用相同组件思路

vue之多项目|多工程共用相同组件的思路解读

作者:搬砖怪

这篇文章主要介绍了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官网。

总结

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

您可能感兴趣的文章:
阅读全文