如何实现跨项目代码复用__Vue.js
发布于 1 个月前 作者 banyungong 219 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

通常我们前端不仅仅只有一个项目,而是有多个项目同时开发,但是往往这多个项目之间代码有一些可以公用的地方,比如说我们的一些组件啥的,一般我们遇到相同的地方都是会直接选择复制,但是这样的问题也很明显,就是一个地方改了,要同时去修改其它的地方,这样显然不太合理,没有达到复用的目的。所有关于这样的情况要想代码复用,我比较推荐使用npm的形式进行管理我们的代码。

首先我们创建两个项目project1和project2

vue create project1
vue create project2

然后我们需要在src目录下面建一个npm发包的目录叫做BaseUI即可,然后进入这个文件执行npm init 初始化一下包名称和版本等详细信息。然后我们通常会定义以下文件:

lib // 这个目录下面放组件文件
.npmignore // 这是忽略文件的
README.md // 这是项目说明文档
package.json // 这是包的信息描述

注意,我们的项目和npm发包的文件是写在一起,目的就是为了就近管理,因为通常我们的组件会进行多次的修改,通常我们写的是业务组件,并不像element-UI组件一样那么稳定,所以为了方便就没有相互独立开来,但是我们可以通过git subtree命令,通过分支来管理文件,这样同样可以达到我们的目的:

git subtree push --prefix src/BaseUI origin base-npm

上面这个命令就是把项目中的src/BaseUI目录下的所有文件推送到了base-npm分支,我是自master分支上直接把指定的文件夹推送到指定的分支,所以每次项目改了你只需要重新把代码推送到发包的分支就可以了。

然后切换到发包分支base-npm执行发包的命令,npm login登陆完成执行npm publish完成。你也可以不把发包的目录独立的抽离到单独的分支里面,而是直接每次进入到发包目录里面去执行发包的操作。

这个时候可以在项目2中安装我们的npm包,组件就可以导入进来使用了:

单独引入某个组件

import BaseButton from 'base-ui/lib/BaseButton'

我们组件都在lib里面,也可以配置按需加载,需要babel插件支持

import { BaseButton } from 'base-ui'

安装babel插件,npm install babel-plugin-import \--save-dev,然后修改 .babelrc 文件。

[
  "import",
    {
      "libraryName": "base-ui", // 指向你的组件库名称
      "camel2DashComponentName": false,  // default: true 取消大小写转化
    }
]

现在只共享来项目1的组件给项目2用,如果项目2的组件也想给项目1用,也需要和上面同样操作,在项目里面定义一个发包目录,把文件单独抽到一个分支里面,然后执行发包的操作。

那么为什么多个项目要定义成多个包呢?定义成一个包不行吗?放到一个git仓库管理也可以呀!这样确实可以,但是如果把发包目录独立于项目,最大的问题还是如果要改某个组件,需要在发包目录里面改,改完之后把包发上去,然后再到项目中把包安装上看下效果,然后再不行就再改再继续发包,这样是非常繁琐的。

所以建议的是一个项目里面使用的源文件,一个项目里面使用的是包,这样来达到共享的目的,而不是两个项目里面都同时去使用包。

我的测试项目地址:GitHub地址连接

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 前端精髓 原文链接:https://juejin.im/post/6850418108793651213

回到顶部