将工程内的组件集成并发布到私有仓库以及后续联动运行（热启动）

英俊潇洒美少年

已于 2024-08-27 13:57:13 修改

阅读量855

点赞数 20

文章标签： vue 前端框架

于 2024-08-27 13:53:56 首次发布

本文链接：https://blog.csdn.net/weixin_45549481/article/details/141601054

版权

将工程内的组件发布到私有仓库

背景与简介
1、项目的数据
私有仓库地址：【】
私有仓库账号/密码：【】
组件包名称：【@ciec/ciec-component-pc】
组件包项目git地址：【】
node版本：【】
2、文献链接
a)t
b)
3、注意
后期开发使用，只需要关注五、六段落即可

一、组件包准备（待完善）

1、新建一个项目文件夹（项目名称）目录如下；

lib
components —— 该文件夹下存放所有从项目中原封不动复制过来的组件（待修改）
assets —— 从项目中原封不动复制过来的、会被打包工具处理的静态资源
public —— 从项目中原封不动复制过来的、不会被打包工具处理的静态资源
- types —— ts类型
utils —— 从项目中原封不动复制过来的公共方法
index.js —— 通过Vue.component()，注册全局组件方法
src
- main.js —— 预留
- App.vue —— 预留
package.json —— 修改name、version、description、author等基础项目信息
修改项目的入口"main": “lib/index.js”,
还需注意name的命名为后续组件库包publish的名称，
如果在某个文件夹下，命名则为**“文件夹名称/项目名称”**
vue.config.js
.npmrc
.gitignore
.eslintignore
.editorconfig
postcss.config.js
readme.md—— 项目的描述性文件
- tsconfig.json —— 修改alias文件名别，paths字段中改为@不再指向src，而是指向lib， “@/": ["lib/”]
…其他必须的配置文件

2、components中组件复制，需要改造的地方
a) API接口请求
b) config，文件上传使用了项目中src/config信息
c) store，有的使用了Vuex，或者qiankun的store
d) AppModule，比如导出等，打开了主应用的导出弹窗
e) 路由Route，比如面包屑
f) 其他的暂时没有考虑到

二、组件包代码上传git

1、现在github相应的位置建立一个空的项目；
2、将组件包的代码复制过来，然后提交代码push到远程仓库即可

三、组件包发布

0、私有库准备
如果你还没有一个私有的npm仓库，你需要先搭建一个。你可以使用Verdaccio等工具来快速搭建一个私有的npm仓库。
1、账号登录对应仓库

npm login --registry 仓库地址

2、没有账号，则注册，添加对应仓库账号

npm adduser --registry 仓库地址

3、修改package.json中的version版本号，然后发版

npm publish --registry 仓库地址

4、删除组件库中对应的组件包

npm unpublish --force 组件包名称 --registry 仓库地址

四、项目内使用组件包中的组件

0、项目准备
在你的本地开发环境中，将npm的源配置为你的私有仓库地址。这可以确保当你发布组件库时，它会被上传到你的私有仓库而不是公共的npm仓库。

//.npmrc
registry=https://registry.npmmirror.com/
@ciec:registry=私有仓库地址/

1、项目仓库中的组件包

yarn add 组件包名称
yarn add 组件包名称 --registry 仓库地址 //* 没有配置.npmrc时

2、业务内使用

<template>
  <div>
    <CiecBaseSearchTable
      ref="baseSearchTable"
      :queryForm.sync="queryForm"
      :dataSource.sync="dataSource"
      :searchFormConfig="searchFormConfig"
      :tableConfig="searchTableConfig"
      @eventHandler="handleEventHandler"
    >
    </CiecBaseSearchTable>
  </div>
</template>
<script lang="ts">
@Component({
  name: `${baseConfig.ID}List`,
  components: {
  }
})
export default class extends Vue {
  //todo 具体的业务逻辑
}
</script>

<style lang="scss" scoped>
</style>

五、本地联动运行（待完善）

todo 启动本地的组件包代码、启动本地的主子应用，修改本地的组件包代码，页面可动态刷新
注意：每次通过yarn link 组件包、yarn add 组件包，必须重新运行yarn dev
可以使用npm 也可以使用yarn命令

3 ways to test your components locally before publishing them to npm
A.npm link（yarn link）
1、组件库项目yarn link 创建全局的软链接 (可以通过yarn unlink 取消全局的软连接)

yarn link
yarn unlink //* 取消全局的软连接

2、子应用运行yarn link 组件包名称使用软连接(可以通过yarn unlink 组件包名称，取消使用软连接)

yarn link @ciec/ciec-component-pc
yarn unlink @ciec/ciec-component-pc //* 取消使用软连接

3、子应用运行yarn dev

yarn dev

4、修改组件库项目代码
因为是通过软连接的形式链接过去的，既可以修改组件库的工程，也可以直接修改子应用node_modules/@ciec/ciec-component-pc中的文件，修改后，子应用会重新运行，最后就可以去页面查看改动了
5、开发完毕之后就可以进行“六、组件库发布”了
B、npm pack（待补充）

C、yalc（待补充）

D、使用包本地路径安装
1、子项目运行yarn add 组件包地址

yarn add /Users/haoyuzhang/Desktop/ERP/ciec-component-pc

2、子应用运行yarn dev

yarn dev

3、修改组件库项目代码
因为是通过下载本地的文件，生成六一份组件包的副本，不可直接通过修改组件库的工程代码联调（子应用的node_modules/@ciec/ciec-component-pc代码不会更新），只可以修改子应用node_modules/@ciec/ciec-component-pc中的文件，子应用会重新运行，最后就可以去页面查看改动了
4、开发完毕之后，需要将代码从子应用的node_modules/@ciec/ciec-component-pc复制到组件包的本地工程中，就可以进行“六、组件库发布”了

六、组件库发布（0830）

1、组件库工程
●根据需求进行代码修改；
●修改package.json中的版本号version，有序加1
“version”: “0.1.14”,

●在对应的分支，代码提交git（项目开发中，直接在master开发）

git pull
git add .
git commit -m 'add 🌞【common】Initial commit —— 0.1.14'
git push

●组件库包发布

npm publish --registry 私有仓库地址

2、引用组件库的工程
●确保node版本正确，下载（切换到）16.14.2

node -v //* 查看node
n 16.14.2 //* 下载
n //* 进行切换

●下载最新的组件库包

 yarn add @ciec/ciec-component-pc

●将node切换到原来的版本（可能某些人在v16.14.2会运行报错）

n //* 进行切换

●运行当前项目

yarn dev