Ebit – Source code reuse bit workflow

The source code reuse

Almost all Web front-end project code needs to be compiled and packaged to run in the browser, and directly reusing source code from other projects is an effective way to do so without incurring additional build costs.

As mentioned in the previous “Component reuse to Bit Scenarios” article, Ctrl C & Ctrl V, Git Submodule, and MonoRepo are all source reuse methods. In fact, it’s possible to install and reuse the source code as Node Modules — just configure the Webpack Xloader, include specific directories — and that’s really what bit does.

Ebit workflow

We fork bit official REPo (fix some bugs and add feat and EBIT), define BIT positioning and develop EBIT workflow in combination with our own business practices.

Bit の positioning

Source reuse tool

In fact, there are first “source code reuse” business demands, and then the positioning of the bit source code reuse tool; And because of this positioning, we can actually not focus on and introduce tools and processes like Bit Compiler, build, test, etc., production and consumption are based on the source code.

Tool for module management

We maintain the consumer component information in a.bitmap file and avoid writing it to package.json dependencies, so that NPM and BIT are completely separate and parallel modules management systems and tools.

Ebit workflow

Install ebit-bin and invoke the eb abbreviation

npm i -g ebit-bin
Copy the code

Configure an alias

The following aliases are configured with associations, such as those that point to SRC:

• Configuration tsconfig. Json

{ "compilerOptions": { "baseUrl": "src", "paths": { ... aliases } } }Copy the code

• Configure the WebPack resolve alias:
  • npm i -D @ekit/tsconfig-paths-webpack-plugin
  • Configuration webpack resolve

const TsconfigPathsPlugin = require('@ekit/tsconfig-paths-webpack-plugin');

{
  resolve: {
    plugins: [
      new TsconfigPathsPlugin({
        exclude: path.join(process.cwd(), 'components')})]}}Copy the code

• The configuration bit. Json

{ "resolveModules": { "modulesDirectories": [ "src" ], "aliases": { ... aliases } } }Copy the code

• If sASS is used to configure environment variables, follow the following steps:
  • Reference other SCSS resources in the SRC directory only in absolute path format, such as@import 'styles/mixins'
  • Only through@import '~bootstrap/x.scss'Reference the SCSS resource in node_modules

SASS_PATH=node_modules:src
Copy the code

• If less is used, no special configuration is required. Follow the following steps:
  • References other less resources only through relative paths, for example@import '.. /.. /styles/mixins', do not use aliases (bit + less trap)less issue
  • Only through@import '~bootstrap/x.less'Reference less resources in node_modules

Production component criteria

The produced component source code is pushed to the remote BIT server through bit export, and is not published to NPM

Consumer Component Criteria

Consume the component with bit import, skip installing the consumed component dependencies (NPM install), and treat the component dependencies as peerDependencies of the consuming project

• Consumes a specified component for a specific version

eb import --skip-npm-install --override --skip-save-dependencies my-test/namespace/id@(version)
Copy the code

The above command is abbreviated as:

ebi my-test/namespace/id@(version)
Copy the code

• Consume the latest version of a specified component:

eb import --skip-npm-install --override --skip-save-dependencies my-test/namespace/id
Copy the code

The above command is abbreviated as:

ebi my-test/namespace/id
Copy the code

• Switch the version of the consumer component

eb checkout --skip-npm-install --skip-save-dependencies (version) ef-cp-desgin/namespace/id
Copy the code

The above command is abbreviated as:

ebc (version) ef-cp-desgin/namespace/id
Copy the code

• Using the component

Ebi or bit import links the consuming components to the node_modules directory in the form of node Modules

import XXX from '@bit/my-test.collection.id';
Copy the code

Install all dependency and consumption components

First:

npm i
Copy the code

And then:

ebi
Copy the code

The ebi command scans for.bitmap files, following the following logic:

• Filter out allorigin 是 IMPORTEDThe component that consumes the specified version, uses--overrideThe configuration pulls the latest remote code
• Filter out all installation directories not specified by bit.jsoncomponentsDefaultDirectoryWith ‘–merge ours’ configuration to merge local and remote code (local overwrites remote).

Ebi roughly realized:

eb config set analytics_reporting false eb init eb remote add ssh://[email protected]:/data/bit/xxxx cps=$(node -e """ /*  eslint-disable @typescript-eslint/no-var-requires */ const fs = require('fs'); const JSON5 = require('json5'); const bitmap = JSON5.parse(fs.readFileSync('./.bitmap', { encoding: 'utf-8' })); console.log( Object.keys(bitmap) .reduce((ids, id) => { if (id ! == 'version') { const { origin } = bitmap[id]; if (origin === 'IMPORTED') { ids.push(id); } } return ids; }, []) .join(' ') ); """) if [[ "$cps" != "" ]]; then eb import --skip-npm-install --override --skip-save-dependencies $cps fiCopy the code