将工程内的组件 发布到私有仓库
背景与简介
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