Fancy Yang

introduce

  • Easy to share and synchronize components, code blocks, methods, styles, etc
  • Provides online editing of component documents, visual online debugging sandbox environment. bit.dev

This article describes how to use it in the React project

  • Bit document docs. Bit. Dev/docs/quick -…
  • React use docs. Bit. dev/docs/tutori…

Advantages of using

  • For producers:

    • You can upload the bit directly without having to copy the component separately.

    • Bit automates code packaging based on code analysis. Each component is automatically packaged at a higher granularity without the overhead of maintaining individual packages, automatically versioning components as their dependencies change.

    • Component code can be changed in any project, and local changes that use components in a project can be retained and still be merged with incoming updates.

    • Each component is versioned individually, so the version number reflects changes made in the component using semver conventions (patch, minor, major).

  • For consumers:

    • Components that can be modified do not need the Clone component library, but can be modified directly in the project.

    • Components can be installed using NPM/YARN, so they fit into the normal workflow of a project developer.

    • Consumers of components get smaller package sizes because they only get the components they need

Risk and pain points

  • The export process for components needs to be regulated.
  • The bit.dev platform charges for building multiple private repositories.
  • Bit Server is a replacement tool for bit.dev. It only provides functions as a “remote repository” to store components. It communicates with the Bit Server locally through SSH. On the other hand, it’s less functional but less costly, and you only need a Server to use a Bit Server.

Relevant information, etc

Bit component

  • This can be a React or VUE component (the exact boundary of a component is a design decision. You can package the entire library into a single Bit component or split each functional part into separate components. It is generally recommended to form components in small units for easy reuse.)
  • Can be style sheets (CSS, LESS, SCSS)
  • Can be common functions used by the program (tool methods)

Bit component structure (stores three elements for each component bit)

  • The code itself, the tests, the documentation, etc.
  • Dependency Graph
    • When you add a bit component, bit analyzes all the dependencies it contains (that is, the import and require statements in your code). The Bit then creates a model of all of the component’s dependencies. Dependencies include: (If the dependency has an alias, you need to configure the alias in the bit configuration file)
      • NPM package installed as node_modules
      • Bit component installed to node_modules
      • Install the bit component locally to the project using import
      • Bit components are locally created from local files
  • Tools & Configuration (Tools and Configuration)
    • Compiler compiles or translates the original files and generates the built artifacts. Artifacts can be consumed by applications or other components. Compilers are framework specific because they contain the configuration needed to run them.
    • Tester

The life cycle

  1. Production of components
    • Track: Starts components in the workspace by specifying the files that make them up. In this workspace, this is a authoring component
    • Version: The marked Version seals the file content and metadata under this Version. If the component has a compiler, the Bit builds the component and seals the built artifacts (think of it as both Git commit and NPM publish).
    • Export: The exported component creates a unique ID for the component. The unique ID is the remote scope name and the local component name. The export command sends copies of files and metadata to the remote server.
  2. Consumption Component (after upload)
    • Use NPM I/YARN add to add components to package.json as regular NPM packages to node_modules
    • Import the bit component into the workspace with package.json pointing to the local file: “@bit/user.collection.tabs”: “File :./components/tabs”. Code changes are tracked and can be exported as new releases.
    • Eject(pop-up) If you export a new version, you can revert to installed components. Package. json updates back to “@bit/user.collection.tabs”: “0.0.3”

Using document

Install the bit & BVM & NPM config configuration

1. Download the BVM Bit version management tool
yarn global add @teambit/bvm

// 2. Download bit
bvm install

// Install bit (node version >= 8.12)
npm install bit-bin -g

/ / update the bit
bvm upgrade

/ / update the BVM
yarn global add @teambit/bvm

// Set NPM config to download components directly using NPM or YARN
npm config set @bit:registry https://node.bit.dev
Copy the code

Create an account in bit.dev and create your own collection (the name cannot be changed and needs to be remembered)

  1. Create a collection

  1. Enter the name to select the required version and whether to expose it

Initialize the project and upload the existing components of the project to bit.dev

// If you log in to the remote device for the first time, a browser window will be displayed for verification
bit login

// Initialize the bit environment
// --package-manager yarn Set package management tool react Yarn is recommended
bit init
Copy the code

Use tutorials for multiple usage scenarios

Share components of an existing project (upload to bit.dev)

Case: the react – tutorial

// The case project directory
- react-tutorial
    - src
        - components
            - product-list
            - top-bar
        - app.js
        - index.js
    - package.json

1.Initialize bit init --package-manager YARN2.Track components to share// Bit tracks component dependencies for analysis
    // bit will create a component with the same filenameBit add SRC /components/product-list added src/components/product-list/index.js added src/components/product-list/product-list.css added src/components/product-list/products.js3.Viewing Component Status// Bit will analyze to make sure you have added all the necessary files
    If the file is missing, bit add [path][?/filename] adds the dependency trace as wellBit Status Terminal:new components
    (use "bit tag --all [version]" to lock a version with all your changes)
    > product-list ... ok
    
4.The React Compiler is used to build the React component.// bit stores the component's source code, but the code should remain on Git
    // Bit has a large number of open source compilers
    // Bit import components leave information in package.json
    // react versions <=16.x.x use @1.0.30 react17 use @2.0.0
    bit import bit.envs/compilers/react@1.030.-- Compiler terminal: The following component environments were installed-bit. Envs /react@1.030.New item: package.json"bit": {
      "env": {
        "compiler": "Bit. Envs/compilers/[email protected]"
      },
      "componentsDefaultDirectory": "components/{name}"."packageManager": "yarn"
    }
  
5. Build React Component
    // Packaged components can be used directly by you or other projects
    bit build
    
6.Verify the version of the component// Every time the component is changed and needs to be submitted to bit, the version should be changed to support Semver --patch, etc
   bit tag --all 0.01.Terminal:1 component(s) tagged
    (use "bit export [collection]" to push these components to a remote)
    (use "bit untag" to unstage versions)
    new components
    (first version for components)
     > product-list@0.01.

7.Check the status again bit status terminal:// Staged state Indicates that a component is ready to be uploaded
   staged components
    (use "bit export <remote_scope> to push these components to a remote scope")
     > product-list. versions: 0.01.. ok8.Export the component to the bit.env platform// Now you can see the uploaded component in the bit platform
   bit export<username>. React-tutorial terminal: exported1 components to scope <username>.react-tutorial

Copy the code

Use components in other projects

// Use NPM I/YARN add to download components to node_modules.
yarn add @bit/<username>.react-tutorial.product-list

// Use bit import to download component code into the project example:
bit import @bit/<username>.react-tutorial.product-list

// Use the same as the normal NPM package
import ProductList from '@bit/<username>.react-tutorial.product-list';

Copy the code

Modify components in other projects and upload them

// Download the component code into the project via bit import
bit import @bit/<username>.react-tutorial.product-list

// Change any code for the component

// Check the bit component status.Bit Status Terminal: Modified Components (use"bit tag --all [version]" to lock a version with all your changes)
(use "bit diff" to compare changes)

     > product-list ... ok

// Change the version of the component (a patch version is automatically added)
bit tag product-list

// Export the component to the remote collection (after this step, other projects can get the latest version)
bit export <username>.react-tutorial

Copy the code

Get updates in existing projects

// For example, the project already has product-list 0.0.1
// If you do not add the latest version of the component imported into the project, the default is the latest version
bit importDig - ant. Fancy/product - the list @ version// If it is an NPM referenced component updateNPM I @bit/dig-ant.fancy. Product-list @ versionCopy the code

Basic Common Commands

// View basic component information
bit show <id>

// View the update log of the component
bit log <id>

// View the list of bit components (excluding the components in the add phase)Bit list bit list <Collection> View the components on the remote Collection. List bit list -- Outdated compares the version of local and remote values// Check the status of all local components
bit status

// Determine the version of the component
// Use semver convention default is patch --patch --minor --majorBit tag --all Adds the patch version to all traced components (with new changes) (not to components that have not been modified) bit tag < ID > <version> Adds the version to individual components bit untag The code will not be lost such as a local component that has0.02. 0.03.Pending cancellation0.02.The version code is still there0.03.In the// Trace componentsBit add <file_path> --id <component_id> Trace a single componentBit remove 
      
        Local component files do not remove bit remove dig-ant. Fancy /foo/bar --remote remove remote Bar component under foo in dig-ant.fancy collection // Local popup component Remove the component code imported into NPM install Import component bit eject (what is the local version, if the local version is higher than the latest remote version // How to resolve the conflict // example: // Use a bit merge to merge a conflict --ours -o if a conflict exists, Please overwrite the version used with the current change -- possession-t if there is a conflict, overwrite the current change with the specified version -- manual-m If there is a conflict, leave the file in the conflicting state, For later manual resolution bit merge 0.0.2 product-list --manual // Resolve the conflict to define the new version if the local version is the update of the earlier version --ignore-newest-version bit tag // if the local version is not updated, the local code will be changed to 0.0.2. // If the local version is updated, the local code will be merged to 0.0.2 --ours -- button --manual -manual) bit checkout 0.0.2 product-list // Import components to local bit import bit.examples/foo Import one or more component bits (separated by Spaces for multiple ids) Import "
       
        .
        
         /*" Import all components in the entire collection bit import "
         
          .
          
           /
           
            /*" Import all components in the same namespace in the collection // View the difference between the modified local bit component (untagged) and the current version bit diff < ID > // Export the local component to the remote bit export 
            
              bit export --eject Export and eject the component
            
           
          
         
        
       
      Copy the code

Commonly used configuration

    "bit": {
	"env": {
            "compiler": "Bit. Envs/compilers/[email protected]"
	},
	"componentsDefaultDirectory": "components/{name}"."packageManager": "yarn"."resolveModules": {
          "modulesDirectories": ["src"].// Add additional paths to parse components
          "aliases": {
            "@": "someDir"}}}Copy the code