微前端 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版本低出现兼容问题