微前端 bit打包

前言 :使用前请慎重,可以先看下官方文档,有一说一,感觉官方文档写的不太清楚,对应的命令和版本并没有写的太清楚,有些命令甚至是之前版本使用的(仅限于我研究之前),本博客是基于 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版本低出现兼容问题

相关推荐
y先森2 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy2 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189112 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿3 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡4 小时前
commitlint校验git提交信息
前端
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒5 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员5 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐5 小时前
前端图像处理(一)
前端