Bit 組件共享

Think in Component

Bit是組件驅動架構贸桶,基于組件的現(xiàn)代應用開發(fā)刨啸。在Bit的世界里,一切皆組件灼捂。

組件可以組合成其他組件,最終組成一個應用APP的猛,即APP也是組件的一種卦尊。

這為我們開發(fā)提供一個新的思路:我們構建可以整合成不同應用的組件岂却,而不是構建包含組件的應用躏哩。

Bit幫我們構建模塊化、穩(wěn)固的正驻、可測試拨拓、可復用的代碼渣磷。

Bit Cloud是組件的云托管服務醋界。它為開發(fā)人員和團隊提供端到端的解決方案丘侠,用于托管蜗字、組織挪捕、檢索、使用滞乙、更新和協(xié)作處理組件奏纪。

image

Bit優(yōu)勢

  • 以組件架構的思想幫助我們構建模塊化、穩(wěn)固的斩启、可測試序调、可復用的代碼。
  • 從現(xiàn)有代碼結構中分離組件浇垦,無需更改結構,或維護新的項目男韧。
  • 可更改依賴組件朴摊,并創(chuàng)建自己的版本獨立管理,無需擔憂污染其它環(huán)境此虑。

初始化Bit工作區(qū)

安裝BVM & Bit

BVM是Bit版本管理工具甚纲,雷同NVM

// node版本12.22.0以上
npm i -g @teambit/bvm

執(zhí)行bvm -h檢驗是否安裝成功,若提醒bvm命令不可用朦前,需要設置環(huán)境變量:

# MacOs Bash
echo 'export PATH=$HOME/bin:$PATH' >> ~/.bashrc && source ~/.bashrc

# zsh
echo 'export PATH=$HOME/bin:$PATH' >> ~/.zshrc && source ~/.zshrc

# windows
setx path "%path%;%LocalAppData%\.bvm"

安裝最新版bit:

bvm install

執(zhí)行bit -h檢驗是否安裝成功介杆,若提醒bit命令不可用,需要按上述流程設置一下環(huán)境變量韭寸。

bit new命令初始化工作區(qū)

適用于新建項目

$ bit new  <env> <project>
$ cd <project>
$ bit install

bit init命令初始化工作區(qū)

適用于已有項目

  1. 先初始化環(huán)境
$ cd <project>
$ bit init --harmony

  1. 手動配置開發(fā)環(huán)境

以react環(huán)境為例春哨,修改workspace.jsonc文件:

"teambit.workspace/variants": {
  "*": {
    "teambit.react/react": { }
  }
}

  1. 安裝必要的peer依賴
$ bit install react --type peer
$ bit install react-dom --type peer

初始化Git

需要將workspace.jsonc和.bitmap 上傳到Git。

創(chuàng)建組件

使用內(nèi)置組件創(chuàng)建

以react為例:

  1. 以內(nèi)置模版創(chuàng)建組件bit create <built-in-template> <component>
$ bit templates # 查看所有的內(nèi)置模版
$ bit create react-component ui/button     # TypeScript
$ bit create react-component-js ui/button  # JavaScript

注意:其中恩伺,<component>可以是個路徑赴背,前置路徑為命名空間,上述示例等同于bit create react-component button --namespace ui。

  1. 添加測試用例
$ bit install @testing-library/react

  1. 編譯并起服務
$ bit compile
$ bit start

自定義組件

  1. 已有組件結構與代碼
  2. 通過bit add <relative-path> --namespace <namespace>添加組件

查看組件信息

可以查看組件編譯環(huán)境凰荚、包含文件燃观、依賴等所有信息。

$ bit show <component-id>

輸出信息示例:

  ┌───────────────┬────────────────────────────────────────────────────────────────────┐
  │ id            │ my-scope/ui/button                                                 │
  ├───────────────┼────────────────────────────────────────────────────────────────────┤
  │ scope         │ my-scope                                                           │
  ├───────────────┼────────────────────────────────────────────────────────────────────┤
  │ name          │ ui/button                                                          │
  ├───────────────┼────────────────────────────────────────────────────────────────────┤
  │ env           │ teambit.react/react                                                │
  ├───────────────┼────────────────────────────────────────────────────────────────────┤
  │ package name  │ @my-scope/ui.button                                                │
  ├───────────────┼────────────────────────────────────────────────────────────────────┤
  │ main file     │ index.ts                                                           │
  ├───────────────┼────────────────────────────────────────────────────────────────────┤
  │ files         │ button.composition.tsx                                             │
  │               │ button.docs.mdx                                                    │
  │               │ button.tsx                                                         │
  │               │ button.spec.tsx                                                    │
  │               │ index.ts                                                           │
  ├───────────────┼────────────────────────────────────────────────────────────────────┤
  │ dev files     │ button.docs.mdx (teambit.docs/docs)                                │
  │               │ button.spec.tsx (teambit.defender/tester)                          │
  │               │ button.composition.tsx (teambit.compositions/compositions)         │
  ├───────────────┼────────────────────────────────────────────────────────────────────┤
  │ extensions    │ teambit.react/react                                                │
  │               │ teambit.component/dev-files                                        │
  │               │ teambit.compositions/compositions                                  │
  │               │ teambit.pkg/pkg                                                    │
  │               │ teambit.docs/docs                                                  │
  │               │ teambit.envs/envs                                                  │
  │               │ teambit.dependencies/dependency-resolver                           │
  ├───────────────┼────────────────────────────────────────────────────────────────────┤
  │ dependencies  │ core-js@3.8.3- (package)                                           │
  ├───────────────┼────────────────────────────────────────────────────────────────────┤
  │ dev           │ @testing-library/react@11.2.6- (package)                           │
  │ dependencies  │ @babel/runtime@7.12.18-------- (package)                           │
  │               │ @types/react-router-dom@5.1.7- (package)                           │
  │               │ @types/jest@26.0.20----------- (package)                           │
  │               │ @types/react@16.9.43---------- (package)                           │
  │               │ @types/node@12.20.4----------- (package)                           │
  ├───────────────┼────────────────────────────────────────────────────────────────────┤
  │ peer          │ react@16.13.1----- (package)                                       │
  │ dependencies  │ react-dom@16.13.1- (package)                                       │
  └───────────────┴────────────────────────────────────────────────────────────────────┘

查看組件狀態(tài)

$ bit status

查看組件所有版本

$ bit log <component-id>

查看本地所有組件列表

$ bit list

啟動測試服務器

通過 worker 運行不同的工作區(qū)任務便瑟,例如測試缆毁、linter 和由組件定義的任何工作區(qū)任務。

$ bit compile
$ bit start

使用組件

在導入另一個組件作為依賴時到涂,Bit不允許使用相對路徑導入脊框。因為這會耦合項目特定的目錄結構,請使用包名替代践啄。

要將組件作為依賴項導入缚陷,必須使用模塊鏈接。

Bit 為工作區(qū)中的每個組件創(chuàng)建一個模塊往核,這些模塊鏈接在 node_modules 目錄中,并包含它的構建輸出和自動生成的 package.json嚷节。

要為組件重新生成模塊鏈接聂儒,請運行該bit link命令。

將組件安裝為NPM包

install命令安裝組件硫痰,以NPM包的形式使用衩婚。

作為Vendor組件

Bit工作區(qū)獲取組件并管理該組件,就好像它是自定義組件一樣

通過import命令安裝組件效斑,示例如下:

$ bit import <component-id>

更新import的組件到最新版本

$ bit import

將Vendor組件轉為NPM包依賴

$ bit eject <component-id>

Scope

Scope是組件的虛擬存儲非春。

Bit 使用Scope保存Bit組件的版本并根據(jù)需要訪問它們。

Remote Scope

托管組件及其版本的Bit服務器缓屠。

特色

在遠程服務器上設置Scope以共享組件奇昙,如Bit.dev或自托管 Bit 服務器。

將組件存儲在Remote Scope上敌完,可以使它們在其他項目中重復使用储耐。

  • 使用import命令從Remote Scope獲取組件。
  • 使用export命令將組件推送到Remote Scope滨溉。

注意:Remote Scope會緩存組件依賴什湘,例如其他Scope的組件。這樣做的好處是晦攒,即使依賴組件不可用闽撤,還能確保當前組件可執(zhí)行。

使用

在Bit Server創(chuàng)建Remote Scope后脯颜,需要更改workspace.jsonc文件:

{
  "teambit.workspace/workspace": {
    "defaultScope": "<bit-username>.<remote-scope-name>"
  }
}

workspace.jsonc文件中的任何更改都需要重新啟動本地開發(fā)服務器哟旗。

$ bit start

Workspace Scope

工作區(qū)組件的本地存儲。

特色

開發(fā)人員的工作區(qū)都在本地 Scope 中保存了組件及其歷史記錄的工作副本。這允許我們?yōu)g覽歷史記錄热幔、比較版本和檢查組件的過去修訂乐设。

Workspace Scope也可能包含來自各異Remote Scope的組件。

共享組件

  1. 為已修改的組件更新版本號
$ bit tag --all --message "first version"

  1. 共享組件
$ bit export

注意:當共享上傳流程結束绎巨,.bitmap文件將更新以反映該新狀態(tài)近尚。

安裝組件

注冊Scope源

$ npm config set '@YourUserName:registry' https://node.bit.dev

安裝依賴

$ npm install @orgName/componentScopeName.componentID

Bit Component vs. NPM包

Bit 專注于基于組件的工作流,npm 包關注編譯后的輸出场勤。

  • 生成NPM包只是Bit Component構建流程的部分戈锻,Bit稱之為版本工件。

Configuration

每個組件都必須配置一個環(huán)境和媳,好讓Bit 就“知道”如何構建格遭、測試、lint 和document組件留瞳。

teambit.workspace/variants提供一個統(tǒng)一的方式拒迅,可以為每個組件設置不同的配置項,而無需修改每個組件文件下的 package.json 她倘。

{
  "teambit.workspace/variants": {
    "design/theme": {
      "defaultScope": "acme.theme",
    },
    "cart": {
      "defaultScope": "acme.cart",
      "teambit.react/react": {}
    }
  }
}

查看配置

  • bit env - 打印一個簡單的表格璧微,其中包含工作區(qū)中的所有組件及其環(huán)境
  • bit show <component> - 打印組件的所有信息,包括環(huán)境
  • bit start- 通過瀏覽器可視化瀏覽組件樹以查看組件的環(huán)境

移除組件

移除本地組建

$ bit remove <component-id>

產(chǎn)生的影響:

  • 一個未追蹤的組件依賴 刪除組件 —— 沒有影響
    • 因為Bit還沒有隔離未追蹤的組件硬梁,不會檢測其依賴
  • 一個已追蹤的組件依賴 刪除組件 —— 會警告前硫,使用--force強制刪除
  • 引入的遠程組件依賴 刪除組件 —— 沒有影響
    • 因為遠程組件是已經(jīng)隔離且不可更改的
    • 本地引入遠程組件且更改會創(chuàng)建另一個版本

移除遠程組件

$ bit remove <username.your-scope/ui/button> --remote

以一個例子描述產(chǎn)生的影響:

  • button組件在遠程uiScope中
  • card組件依賴button組件,也在uiScope中
  • login組件依賴button組件荧止,在adminScope中

刪除button組件后的影響:

  • 因為card組件與button組件在同一個Scope中屹电,因此刪除button組件會有個警告。
    • 可追加---force強制刪除
    • 刪除后跃巡,card組件缺少依賴危号,為保證其正常工作需要重構
  • login組件沒有影響
    • Bit會在Scope中維護依賴
  • 其他項目依賴login組件時,安裝會報錯
    • 溯源button組件瓷炮,缺失

編譯組件

大多數(shù)現(xiàn)代框架都需要一個編譯或轉譯項目來將源代碼轉換為可以在多個瀏覽器或 Nodejs 中運行的可執(zhí)行代碼葱色。

而Bit 的編譯器是一個環(huán)境服務。

編譯器的選擇(Babel娘香、TypeScript 等)及其配置由其服務的各種環(huán)境決定苍狰。

編譯器永遠不會直接運行,而只能通過 Compiler 服務運行烘绽。

單個工作區(qū)可能會針對不同的組件運行不同的編譯器淋昭,每個編譯器都根據(jù)自己的環(huán)境。

$ bit compile <component-id> # 編譯特定組件
$ bit compile # 編譯工作區(qū)全部組件

組件依賴關系圖

Bit 的一個關鍵特性是能夠根據(jù)組件的源代碼自動創(chuàng)建依賴關系圖安接。

Javascript 可以使用 require 或 import 聲明依賴兩種類型的依賴項:

  • 作為 node_modules 安裝的軟件包
  • 項目內(nèi)部的文件和目錄翔忽,或在裝飾器中引用(例如在 Angular 中)

node_modules依賴

Bit解析包(即node_modules)的流程:

image
  • 可以通過bit show <component-id>來檢查 Bit 為每個包解析的依賴項(Packages):
$ bit show hello/world
┌───────────────────┬─────────────────────────────────────────────────────────────────────┐
│        ID         │                            hello/world                              │
├───────────────────┼─────────────────────────────────────────────────────────────────────┤
│     Language      │                             javascript                              │
├───────────────────┼─────────────────────────────────────────────────────────────────────┤
│     Main File     │                      src/hello-world/index.js                       │
├───────────────────┼─────────────────────────────────────────────────────────────────────┤
│     Packages      │                           left-pad@^2.1.0                           │
├───────────────────┼─────────────────────────────────────────────────────────────────────┤
│       Files       │       src/hello-world/hello-world.js, src/hello-world/index.js      │
└───────────────────┴─────────────────────────────────────────────────────────────────────┘

如果 Bit 無法解析所有包的依賴項,它會提示missing package dependencies。我們需要驗證 package.json 中是否確實存在所有包歇式。

文件依賴

組件可以依賴于其他文件驶悟,例如import ./utils.js。

為了隔離這些依賴其它文件的組件材失,我們還需要跟蹤該組件依賴的其它文件痕鳍。這是因為如果我們想在另一個項目中使用這個組件,該組件必須要有它的依賴文件龙巨。

注意:Bit 使用靜態(tài)代碼分析笼呆,因此僅支持靜態(tài)導入import,不支持require旨别。

Bit解析文件依賴的流程

image

當 Bit 遇到需要跟蹤的文件時诗赌,它會嘗試檢查該文件是否已經(jīng)在另一個組件中進行了跟蹤,在這種情況下秸弛,Bit 將使另一個組件成為該組件的依賴項铭若。

如果文件未被跟蹤,Bit 將untracked file dependencies在檢查組件狀態(tài)時發(fā)出警告递览。

隔離問題

要解決隔離問題奥喻,您可以:

  • 將未跟蹤的文件依賴項添加到現(xiàn)有組件
  • 將文件作為新組件進行跟蹤

采取以上何種方法基于文件的上下文。如果該文件被多個其他組件使用非迹,則將其放入一個單獨的組件中是有意義的。

但是纯趋,如果此文件僅僅是被跟蹤文件的內(nèi)部文件憎兽,則可以將其添加為組件的文件。

文件添加到現(xiàn)有組件

運行bit add指向要添加文件的組件的 Id:

// 示例
$ bit add src/utils/noop.js --id hello/world

運行bit status 吵冒,檢查是否成功:

$ bit status
new components
    > component/hello-world... ok

文件作為新組件進行跟蹤

可以bit add添加新組件

// 示例
$ bit add src/utils/noop.js --namespace utils

執(zhí)行結果是一個新組件纯命。

私有化部署v15

image

硬件條件

  • Linux/Mac系統(tǒng)
  • 內(nèi)存4G+

前置條件

  • Docker
  • Git
# 卸載舊版docker
$ yum remove docker  docker-common docker-selinux docker-engine
# 安裝docker依賴
$ yum install -y yum-utils device-mapper-persistent-data lvm2
# 設置docker源
$ yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
$ yum install docker-ce
# 啟動docker
$ systemctl start docker
# 加入開機啟動
$ systemctl enable docker

# 安裝Git
$ yum install git

部署流程

$ git clone https://github.com/teambit/bit.git
$ cd bit/scripts/docker-teambit-bit
$ docker build -f ./Dockerfile-bit -t bitcli/bit:latest .
$ docker build -f ./Dockerfile-bit-server -t bitcli/bit-server:latest .
$ docker run -dit bitcli/bit:latest /bin/bash # 運行
$ docker run -dit -p <port>:3000 bitcli/bit-server:latest

  • Dockerfile-bit:
    • 安裝 bvm 然后使用 bvm 安裝 bit 的 docker 文件。
    • 這個 docker 通常對在 CI 機器上運行像 tag 和 export 這樣的Bit命令很有用
  • Dockerfile-bit-server:
    • 一個基于Dockerfile-bit(使用 from)的docker 文件
    • 該docker文件創(chuàng)建一個空白Scope痹栖,并在其上通過bit start初始化Bit服務器
  • Dockerfile-symphony:
    • 僅供內(nèi)部使用

相關問題

Mac電腦ssh鏈接: Permission denied

$ sudo ssh root@<ip>

ssh鏈接時報警告WARNING: REMOTE HOST IDENTIFICATION HAS CHANGE

$ sudo ssh-keygen -R <ip>

bvm install安裝不了Bit

臨時更改terminal代理

$ export http_proxy=http://127.0.0.1:1087
$ export https_proxy=$http_proxy

注意:

  • 需要有VPN
  • 保證瀏覽器可以訪問外網(wǎng)
  • 開啟VPN亿汞,即使全局,終端也是無法被代理

永久修改代理

# 修改~/.bashrc設置永久管理腳本
function proxy_on() {
    export http_proxy=http://127.0.0.1:1087
    export https_proxy=$http_proxy
    echo -e "終端代理已開啟揪阿。"
}

function proxy_off(){
    unset http_proxy https_proxy
    echo -e "終端代理已關閉疗我。"
}

注意:修改后,通過source ~/.bashrc立即生效南捂。

通過proxy_on啟動代理吴裤,proxy_off關閉代理。

發(fā)布

注冊遠程Scope

# 客戶端
$ cd <my-project>
$ bit init
$ bit remote add http://<host>:<port>

workspace.jsonc

配置teambit.workspace/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": "remote-scope"
  },

打Tag

監(jiān)聽文件變化溺健,才能標識麦牺。

若文件無變化,無法進行標識。

$ bit tag --all  --message "first version"

注意: 獨立的組件通過獨立的“遠程范圍”剖膳、遠程組件托管形成依賴關系網(wǎng)絡魏颓。

這種依賴關系網(wǎng)絡使更改能夠讓一個組件的改變傳播到它的所有依賴組件。也就是說吱晒,一個組件的更改以級聯(lián)的方式觸發(fā)了組件的CI及依賴它的組件的CI甸饱。

舉例:

組件B依賴組件A,二者初始版本皆為0.0.1枕荞。

若組件A由0.0.1進行更改柜候,通過bit tag --all會A0.0.1 —> 0.0.2,B0.0.1 —> 0.0.2躏精。

若繼續(xù)更改組件B渣刷,通過bit tag --all,B0.0.2 —> 0.0.3矗烛,A的版本不變辅柴。

Bit部署

部署的前提是有新的標識,否則瞭吃,無法部署碌嘀。

$ bit export

image

擴展Bit

我們通過創(chuàng)建Aspect和接入Bit的API來擴展Bit。

擴展Workspace UI

以新增Tab為例:

初始化Bit環(huán)境

$ bit init

會自動新建.bit/歪架、.bitmap股冗、workspace.jsonc文件(夾)。

修改DefaultScope

{
  ...
  "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": "me"
  },
  ...
}

新建Aspect

$ bit create aspect aspects/hello-world

生成目錄結構:

.
└──me
  └── aspects
    └── hello-world
      ├── hello-world.aspect.ts
      ├── hello-world.main.runtime.ts
      └── index.ts

其中和蚪,hello-world.main.runtime.ts代碼如下:

// hello-world.main.runtime.ts
import { MainRuntime } from '@teambit/cli';
import { HelloWorldAspect } from './hello-world.aspect';

export class HelloWorldMain {

  static slots = [];
  static dependencies = [];
  static runtime = MainRuntime;
  static async provider() {
    return new HelloWorldMain();
  }
}

HelloWorldAspect.addRuntime(HelloWorldMain);

注意:hello-world.main.runtime是負責擴展workspace CLI和 workspace Server的止状。

為了在組件詳情頁創(chuàng)建一個新的菜單,我們需要參考hello-world.main.runtime.ts文件新建hello-world.ui.runtime.tsx文件:

// hello-world.ui.runtime.tsx
import React, { useContext } from 'react';
import { UIRuntime } from '@teambit/ui';
import { ComponentUI, ComponentAspect } from '@teambit/component';
import { HelloWorldAspect } from './hello-world.aspect';

export class HelloWorldUI extends React.Component<any> {
  static slots = [];
  static dependencies = [ComponentAspect];
  static runtime = UIRuntime;
  static async provider([component]: [ComponentUI]) {
    return new HelloWorldUI();
  }
}

HelloWorldAspect.addRuntime(HelloWorldUI);

注意:這里引入了ComponentAspect攒霹,它是Bit核心Aspect怯疤,負責組建頁面所有的組件和操作。將ComponentAspect作為依賴催束,我們能在provider中獲取到它并使用它提供的API集峦。

// 更新hello-world.ui.runtime.tsx
// 注冊registerNavigation導航
import React, { useContext } from 'react';
import { UIRuntime } from '@teambit/ui';
import { ComponentUI, ComponentAspect } from '@teambit/component';
import { HelloWorldAspect } from './hello-world.aspect';

export class HelloWorldUI extends React.Component<any> {
  static slots = [];
  static dependencies = [ComponentAspect];
  static runtime = UIRuntime;
  static async provider([component]: [ComponentUI]) {
     component.registerNavigation({  
       href: '~hello',  
       children: 'Hello'
     });
    return new HelloWorldUI();
  }
}

HelloWorldAspect.addRuntime(HelloWorldUI);

這里,我們通過ComponentAspect依賴提供的registerNavigation注冊了導航抠刺,手動切換導航會渲染Hello塔淤。

// 更新hello-world.ui.runtime.tsx
// 注冊registerRoute路由
import React, { useContext } from 'react';
import { UIRuntime } from '@teambit/ui';
import { ComponentUI, ComponentAspect } from '@teambit/component';
import { HelloWorldAspect } from './hello-world.aspect';

export class HelloWorldUI extends React.Component<any> {
  static slots = [];
  static dependencies = [ComponentAspect];
  static runtime = UIRuntime;
  static async provider([component]: [ComponentUI]) {
     component.registerRoute({      
       children: () => <div>hello world</div>,      
       path: '~hello'    
     });
     component.registerNavigation({  
       href: '~hello',  
       children: 'Hello'
     });
    return new HelloWorldUI();
  }
}

HelloWorldAspect.addRuntime(HelloWorldUI);

這里,我們通過ComponentAspect依賴提供的registerRoute注冊了路由速妖,該路由會承接上述注冊的導航凯沪,簡單的渲染了hello world。

注冊自定義Aspect

在執(zhí)行Aspect之前买优,要為其配置解析環(huán)境妨马,該環(huán)境會將Aspect最終轉譯為瀏覽器挺举、nodejs可識別的代碼。

{
  ...
  "teambit.workspace/variants": {
    "{me/aspects/*}": {
      "teambit.harmony/aspect":{}
    }
  },
  "me/aspects/hello-world": {}
  ...
}

安裝依賴

$ bit install

不安裝依賴烘跺,bit start也是正常運行的湘纵,只是看不到增加的UI。

效果展示

運行bit start查看效果~

image

注意:若要更新展示滤淳,則要刪除.bit/梧喷、node_modules、public/脖咐,再次執(zhí)行bit install和bit start铺敌。

查看Aspect信息

中途可通過bit show me/aspects/hello-world查看信息

通過內(nèi)置模板創(chuàng)建擴展

  • 通過bit templates查看內(nèi)置模板
  • 通過`bit create <template> <custom-name> [--scope scope-name]
  • 通過bit install安裝模板相關依賴
  • 通過bit status查看自定義擴展狀態(tài)
  • 若有依賴缺失報錯,將缺失依賴添加到:
  "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": {
        "react": "~17.0.2",
        "@testing-library/react": "~12.1.2"
      }
    }
  },

bit install補充安裝依賴屁擅。

  • 通過bit start --dev測試偿凭。
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市派歌,隨后出現(xiàn)的幾起案子弯囊,更是在濱河造成了極大的恐慌,老刑警劉巖胶果,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件匾嘱,死亡現(xiàn)場離奇詭異,居然都是意外死亡早抠,警方通過查閱死者的電腦和手機霎烙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門粱甫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來智绸,“玉大人,你說我怎么就攤上這事坛掠∵浣保” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵酱床,是天一觀的道長羊赵。 經(jīng)常有香客問我,道長扇谣,這世上最難降的妖魔是什么昧捷? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮罐寨,結果婚禮上靡挥,老公的妹妹穿的比我還像新娘。我一直安慰自己鸯绿,他們只是感情好跋破,可當我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布簸淀。 她就那樣靜靜地躺著,像睡著了一般毒返。 火紅的嫁衣襯著肌膚如雪租幕。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天拧簸,我揣著相機與錄音劲绪,去河邊找鬼。 笑死盆赤,一個胖子當著我的面吹牛贾富,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播牺六,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼颤枪,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了兔乞?” 一聲冷哼從身側響起汇鞭,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎庸追,沒想到半個月后霍骄,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡淡溯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年读整,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片咱娶。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡米间,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出膘侮,到底是詐尸還是另有隱情屈糊,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布琼了,位于F島的核電站逻锐,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏雕薪。R本人自食惡果不足惜昧诱,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望所袁。 院中可真熱鬧盏档,春花似錦、人聲如沸燥爷。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至勺拣,卻和暖如春奶赠,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背药有。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工毅戈, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人愤惰。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓苇经,卻偏偏與公主長得像,于是被迫代替她去往敵國和親宦言。 傳聞我的和親對象是個殘疾皇子扇单,可洞房花燭夜當晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容