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

相关推荐
GIS程序媛—椰子28 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_00134 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端37 分钟前
Content Security Policy (CSP)
前端·javascript·面试
木舟100941 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt