Skip to content
👷‍♂️ A simple CLI to build JavaScript code in React Native libraries for different targets
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin feat: initial implementation Apr 2, 2019
src feat: use tsc from PATH if available Aug 21, 2019
types feat: initial implementation Apr 2, 2019
.babelrc feat: initial implementation Apr 2, 2019
.gitignore feat: initial implementation Apr 2, 2019
.prettierrc chore: add prettier config Apr 28, 2019
.release-it.json
LICENSE.md feat: initial implementation Apr 2, 2019
README.md feat: add a target to build Android AAR files with support for revers… Jun 18, 2019
commitlint.config.js chore: configure husky and commitlint Apr 2, 2019
package.json chore: release 0.7.0 Aug 21, 2019
tsconfig.json feat: initial implementation Apr 2, 2019
yarn.lock feat: add a target to build Android AAR files with support for revers… Jun 18, 2019

README.md

@react-native-community/bob

👷‍♂️ Simple CLI to build React Native libraries for different targets.

Features

The CLI can build code for following targets:

  • Android AAR files
  • Generic CommonJS build
  • ES modules build for bundlers such as webpack
  • Flow definitions (copies .js files to .flow files)
  • TypeScript definitions (uses tsc to generate declaration files)

Why?

Metro handles compiling source code for React Native libraries, but it's possible to use them in other targets such as web. Currently, to handle this, we need to have multiple babel configs and write a long babel-cli command in our package.json. We also need to keep the configs in sync between our projects.

Just as an example, this is a command we have in one of the packages: babel --extensions '.js,.ts,.tsx' --no-babelrc --config-file=./babel.config.publish.js src --ignore '**/__tests__/**' --copy-files --source-maps --delete-dir-on-start --out-dir dist && del-cli 'dist/**/__tests__' && yarn tsc --emitDeclarationOnly. This isn't all, there's even a separate babel.config.publish.js file. And this only works for webpack and Metro, and will fail on Node due to ESM usage.

Bob wraps tools such as babel and typescript to simplify these common tasks across multiple projects. It's tailored specifically to React Native projects to minimize the configuration required.

Installation

Open a Terminal in your project, and run:

yarn add --dev @react-native-community/bob

Usage

To configure your project to use Bob, open a Terminal and run yarn bob init for automatic configuration.

To configure your project manually, follow these steps:

  1. In your package.json, specify the targets to build for:

    "@react-native-community/bob": {
      "source": "src",
      "output": "lib",
      "targets": [
        ["aar", {"reverseJetify": true}],
        ["commonjs", {"flow": true}],
        "module",
        "typescript",
      ]
    }
  2. Add bob to your prepare step:

    "scripts": {
      "prepare": "bob build"
    }
  3. Configure the appropriate entry points:

    "main": "lib/commonjs/index.js",
    "module": "lib/module/index.js",
    "react-native": "src/index.js",
    "types": "lib/typescript/src/index.d.ts",
    "files": [
      "lib/",
      "src/"
    ]
  4. Add the output directory to .gitignore and .eslintignore

    # generated files by bob
    lib/
  5. Add the output directory to jest.modulePathIgnorePatterns if you use Jest

    "modulePathIgnorePatterns": ["<rootDir>/lib/"]

And we're done 🎉

LICENSE

MIT

You can’t perform that action at this time.