前言 :使用前请慎重,可以先看下官方文档,有一说一,感觉官方文档写的不太清楚,对应的命令和版本并没有写的太清楚,有些命令甚至是之前版本使用的(仅限于我研究之前),本博客是基于 1.5.29 (同事试了1.6也可以),下载的时候请用管理员,不然会解压报错.
我研究的是时候参考的文档
https://blog.csdn.net/c_Breath/article/details/114061990
https://www.jianshu.com/p/c6ef6db872b5
https://blog.csdn.net/qq_33332184/article/details/119763178
https://www.gonwe.cn/index.php/archives/186/
https://blog.csdn.net/Xue_zenghui/article/details/100565383?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1-100565383-blog-119763178.235%5Ev40%5Epc_relevant_3m_sort_dl_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1-100565383-blog-119763178.235%5Ev40%5Epc_relevant_3m_sort_dl_base3&utm_relevant_index=2
1.安装
1.1安装bvm
1.1.1设置远端代理
npm config set registry https://registry.npmmirror.com/
npm config get registry
1.1.2执行安装命令
npx @teambit/bvm install
bvm是bit的管理器,可以使用bvm 管理多个版本的bit,使用是 bbit
或者 使用bvm时,一定要使用 管理员身份打开
npm i -g @teambit/bvm
bvm install
1.1.3.bvm使用命令
使用bvm node版本必须在12.22以上,因为官网文档和版本的关系,请安装1.5.29 以上的版本
bvm list 查看已安装的版本
bvm list -- --remote 列出可安装的所有 Bit 版本
bvm use xxx 使用指定版本 第一安装后,bbit 命令不生效,可重启试试
1.2或者直接安装 bit
npm install bit-bin -g
1.3或者
npm install -g @teambit/bit
2.概念
workspace:工作空间
作为workspace.jsonc
工作区及其组件的主要配置文件。
workspace.jsonc
由一系列Bit 方面及其相应的配置组成。例如,以下配置用于配置两个Aspect:
-
teambit.workspace/workspace
:工作区方面(负责工作区) -
teambit.dependencies/dependency-resolver
:Dependency Resolver Aspect(负责依赖管理)
eambit.workspace/workspace
接收工作区本身的配置以及工作区管理的组件的默认值。
由于每个方面都是一个组件,因此它使用组件 ID模式。{
"teambit.workspace/workspace": {
"name": "my-workspace",
"defaultDirectory": "{scope}/{name}",
"defaultScope": "company.scope"
},
"teambit.dependencies/dependency-resolver": {
"packageManager": "teambit.dependencies/pnpm",
"policy": {
"dependencies": {
"classnames": "2.3.1",
"text-transform": "^0.1.2"
}
}
}
}
工作区配置是可扩展的。它不限于预先配置的方面列表。
teambit.workspace/工作区
teambit.workspace/workspace
接收工作区本身的配置以及工作区管理的组件的默认值。
默认范围:defaultScope: string;
工作区中所有组件的默认范围。这将被任何其他配置源(例如变体)覆盖。
默认目录:defaultDirectory: string;
bit import
和期间放置组件的默认目录(相对路径)bit create
。
在本地是分为workspace->scope->componentname
远程的scope是由org+scope组合
3注册账号
3.1 bit官网
https://bit.dev/
3.2 bitclod官网
https://bit.cloud/
在这里注册账户
3.3 创建远端仓库
xxhTest.coms
4 初始化项目
4.1 初始化项目
随便创建一个项目,运行命令
bit init
或者 bvm命令
bbit init
命令运行成功后,会自动创建 .bit 文件夹,还有.bitmap文件夹,在packJSON里,自动成功一段bit的代码,
但是这种生成的没有我们需要 一些配置信息,所以手动将 新增的内容删掉,在重新运行
bbit init
bitmap:
同时,bit 会创建一个 .bitmap 文件用来记录导出组件的版本、文件等信息,我们需要把这个文件添加到 vcs
4.2更改workspace.jsonc文件
必须得对应
源代码
/**
* this is the main configuration file of your bit workspace.
* for full documentation, please see: https://bit.dev/reference/workspace/workspace-json
**/{
"$schema": "https://static.bit.dev/teambit/schemas/schema.json",
/**
* main configuration of the Bit workspace.
**/
"teambit.workspace/workspace": {
/**
* the name of the component workspace. used for development purposes.
**/
"name": "my-workspace-name",
/**
* set the icon to be shown on the Bit server.
**/
"icon": "https://static.bit.dev/bit-logo.svg",
/**
* default directory to place a component during `bit import` and `bit create`.
* the following placeholders are available:
* name - component name includes namespace, e.g. 'ui/button'.
* scopeId - full scope-id includes the owner, e.g. 'teambit.compilation'.
* scope - scope name only, e.g. 'compilation'.
* owner - owner name in bit.dev, e.g. 'teambit'.
**/
"defaultDirectory": "{scope}/{name}",
/**
* default scope for all components in workspace.
**/
"defaultScope": "xxhtest.test-demo",
"resolveAspectsFromNodeModules": true,
"resolveEnvsFromRoots": true
},
/**
* comment in to include generator templates in your workspace.
* browse more dev environments: https://bit.dev/docs/getting-started/composing/dev-environments
**/
// "teambit.generator/generator": {
// "envs": [
// "bitdev.node/node-env",
// "bitdev.react/react-env",
// "bitdev.vue/vue-env",
// "bitdev.angular/angular-env"
// ]
// },
/**
* main configuration for component dependency resolution.
**/
"teambit.dependencies/dependency-resolver": {
/**
* choose the package manager for Bit to use. you can choose between 'yarn', 'pnpm'
*/
"packageManager": "teambit.dependencies/pnpm",
"policy": {
"dependencies": {},
"peerDependencies": {}
},
"linkCoreAspects": true,
"rootComponents": true
},
"teambit.workspace/workspace-config-files": {
"enableWorkspaceConfigWrite": true
}
}
只要在add之前将default scope改过来就可以
5 代码打包上传
5.1 新建一个vue目录和vue文件
<template>
<div>
<button @click="clickFun">点我</button>
</div>
</template>
<script>
export default {
name: '',
data () {
return {}
},
created () {},
methods: {
clickFun() {
alert("点我干啥")
}
},
mounted() {},
computed: {}
}
</script>
<style scoped>
</style>
5.2 文件追踪
bbit add .\src\aaa\
如果直接追踪报错
返回3-2 ,删除干净了重新配置下
添加追踪成功
5.3 标记
bbit tag --ignore-issues "ParseErrors, MissingManuallyConfiguredPackages"
可以不使用后面的参数
5.4 登录
bbit login
5.5 导出
bbit export
5.6 去云仓库查看
5.7 bit在新项目使用
bit命令使用
将文档原代码引入
bit fork xxhtest.test-demo/aaa
6 遇到的问题
好像components 下的不能导出啊,估计还得配置啥.但是你直接新建个文件啥的就可以
错误分析:
Bit 工具在处理名为 xxhtest.test-demo
的组件时遇到了问题,因为它没有在指定的路径 components
下找到主文件。在 Bit 中,每个组件都需要有一个主文件,这个文件通常包含了组件的主要代码和逻辑。
错误解决:
1.用 --id
参数 :当你添加组件时,可以使用 --id
参数来指定组件的唯一标识符,这样即使没有明确的主文件,Bit 也能将所有添加的文件视为一个组件。【用了不好使】
2.新建一个明确的主文件,比如一个 index.js
或者 main.js
文件
7.报错记录
如果node版本低出现兼容问题