本文主要是介绍将工程内的组件 集成并发布到私有仓库以及后续联动运行（热启动），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
将工程内的组件 发布到私有仓库
背景与简介
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><CiecBaseSearchTableref="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
这篇关于将工程内的组件 集成并发布到私有仓库以及后续联动运行（热启动）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
