# 前端多项目共享组件解决方案

**Repository Path**: JustTwo/common_components

## Basic Information

- **Project Name**: 前端多项目共享组件解决方案
- **Description**: 前端多项目共享组件解决方案
多项目共有组件库

- **Primary Language**: JavaScript
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-09-22
- **Last Updated**: 2023-05-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 多项目共享组件解决方案

## README


# 前端公共组件解决方案 yalc nodemon
## 开始
#### 1. 全局下载依赖包
```js
npm install yalc -g
npm install nodemon -g
```
#### 2. 新建公共组件库文件夹common_components 并在common_components文件下初始化公共组件库
```
npm init
```
#### 3. 新建index.js文件 用于暴露组件出去
```js
import common from './components/common.vue'
export {
    common
}
```
#### 4. 修改或添加package.json中的main属性<引用依赖时的文件地址>
```json
"main": "index.js"
```
#### 5. common_components文件下新建components文件存放公共组件
#### 6. 将公共组件common_components的文件分发到yalc本地模块
```js
// 在公共组件common_components目录下运行命令：
yalc publish
```
#### 7. 从yalc本地模块引用公共组件
```js
// 在需要使用公共组件的项目根目录中运行命令(common_components为package.json中的name字段)：
yalc link common_components
```
#### 8. 公共组件的引用
```js
// 在需要公共组件的模块中按需引用
import { common } from '@/../.yalc/common_components/index.js';
export default {
    components: { common }
}
```
#### 9. package.json 中新建 yalc_watch 命令 开发组件时时运行 yalc_watch
```json
"scripts": {
    "yalc_watch": "nodemon --ignore package.json -C -e .vue,.js -x \"yalc push\"", // 监听包变化
    "yalc push": "yalc push" // 命令会更新包并分发到各个引用的项目中
}
```

## yalc 命令
#### 1. 分发包变化 yalc push
#### 2. 更新包变化 yalc update
#### 3. 包全部清除并还原 yalc remove --all
#### 4. 清除指定包 yalc rm common_components
#### 5. 查看本地仓库里存在的包 yalc installations show
#### 6. 发布包完全禁用脚本执行 yalc publish --no-scripts

## nodemon 相关参数
#### 1. 忽略目录 --ignore xx/
#### 2. 观察目录 --watch xx/
#### 3. 只在变更后执行，首次启动不执行命令 -C
#### 4. 监控指定后缀名的文件  -e vue,scss
#### 5. 调试 --debug
#### 6. 自定义执行命令 -x \"yalc push\"

## 注意
#### 1. 新增公共库时记得修改package.json中的name字段
#### 2. 从git更新后一定记得运行一下yalc push分发更新到各个共用组件的项目中
#### 3. link了公共组件的项目文件根目录中.gitignore中最好忽略yalc.lock和.yalc/yalc.sig 因为保存的signature签名是自己本地的 每个成员的signature都不一样