Using bit.dev to share functionality between projects. Part 1

Tips on how to share small pieces of functionality between your project using bit.dev approach.

First of all install bit cli:

copied bash

npm install bit-bin -g

Initialize bit workspace in current project:

copied bash

bit init

Adding typescript compiler:

copied bash

bit import -c bit.envs/compilers/react-typescript

Next we will have to make changes in our package.json for everything to work correctly. For raw javascript project without any complexity everything will work out of the box. But I like styled-components and typescript. And it needs some hassle to rocket jump. First we have to put our preinstalled react-typescript compiler there and put two important options:

copied

"compilerOptions": {
  "types": ["node"],
  "module": "CommonJS"
}

They are needed to avoid bug provided by styled-components hard dependency on @types/react-native and for everything to be properly compiled as commonjs module. Probably first error which you will see in console in this case is something like "duplicate identifier ... was also declared here ...". At least this error I started google with when encountered this first time.

To make typescript happy we also have to provide node types via overrides section:

copied

"devDependencies": {
  "@types/node": "^14.14.10"
}

And we also specify yarn as package manager and setup our resolve modules alias as we have in our project's tsconfig.json.

Whole setup which goes directly to package json could be found in next listing.

copied json

{
  ...
  "bit": {
    "env": {
      "compiler": {
        "bit.envs/compilers/react-typescript@3.1.61": {
          "rawConfig": {
            "tsconfig": {
              "compilerOptions": {
                "types": ["node"],
                "module": "CommonJS"
              }
            }
          }
        }
      }
    },
    "overrides": {
      "*": {
        "devDependencies": {
          "@types/node": "^14.14.10"
        }
      }
    },
    "componentsDefaultDirectory": "bits/{name}",
    "packageManager": "yarn",
    "resolveModules": {
      "aliases": {
        "@": "src"
      }
    }
  }
  ...
}

After we've finished our configuration we are ready to incapsulate and export our first component. To do this just follow instructions in bit.dev quick start documentation. Now let's continue and actually do something.

Links:

• https://bit.dev/bit/envs/compilers/react-typescript
• bit.dev