多个Vue前端项目公共组件的使用之npm publish

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/milugloomy/article/details/84635717

背景

我们公司是搞健康管理的,产品主要有2个,医生端APP,和患者端微信公众号。这2个产品有很多内容是相似的、甚至一样的。包括页面、样式、JS逻辑等。这样就想将这些公共部分封装成公共组件供2个项目调用。

方案

项目是常规的Vue项目,其中doctor和patient分别为医生端和患者端的项目,aikang-common是公共组件。

我们可以将aikang-common打包成一个node_module,然后供另外2个项目引用。另外2个项目将打包好的aikang-common引入到本项目的node_modules中,以包的方式引用。

项目结构如下

首先在根目录中创建文件index.js,将需要导出的组件写在index.js中,内容示例如下:

import PatientProtocol from './src/components/patientProtocol'
import DoctorProtocol from './src/components/doctorProtocol'
import Ajax from './src/components/ajax'
import Check from './src/components/check'
import JkdaPatient from './src/pages/jkda/jkdaPatient'
import JkdaDoctor from './src/pages/jkda/jkdaDoctor'

export {
  PatientProtocol,
  DoctorProtocol,
  Ajax,
  Check,
  JkdaPatient,
  JkdaDoctor,
}

打包方式有2种,本地打包引用和npm发布引用。

本地打包引用

分别进入patient和doctor项目,在控制台输入命令:

npm install ../aikang-common/

其中../aikang-common/是aikang-common的相对路径,这里也可以输入绝对路径。

这样就将aikang-common这个工程以node_module的方式引入到patient和doctor项目中了。可以正常使用aikang-common在index.js中导出的组件了。

但是这样当aikang-common改动时,就需要先更新aikang-common的代码,然后进入doctor和patient项目执行命令 npm install ../aikang-common/ 。下面讲npm发布引用的方式。

扫描二维码关注公众号,回复: 7614541 查看本文章

npm发布引用

我们采取专人维护aikang-common的方式。aikang-common的组件编写完成后,将其发布到npm。开发patient和doctor的程序猿通过以下命令将aikang-common以node_module的方式引入:

npm install aikang-common

发布流程如下:

  1. 在注http://www.npmjs.com册一个账号
  2. 进入aikang-common的控制台,输入命令npm login,按照提示输入刚注册的账号密码
  3. 输入命令 npm publish 即可

需要注意的是,若报错你没有权限发布该项目,那应该就是你的这个项目名被别人用过了,在package.json中修改下项目名再发布吧。

另外,每次改动代码再次发布时,需要修改package.json文件中的版本号,不然发布不成功。

这样开发patient和doctor的程序猿只需关注自己项目的业务功能,公共的aikang-common有更新时,执行命令npm install aikang-common就可以了。

可是好像也就只省了拉代码这一步,频繁改动aikang-common时,doctor和patient还是需要重新引入公共的aikang-common。

那有没有一种办法可以在公共组件改动时,立刻生效,而不用每次都在doctor和patient中npm install呢?下一节讲解。

猜你喜欢

转载自blog.csdn.net/milugloomy/article/details/84635717
今日推荐