Skip to content

👷‍♂️ A simple CLI to build JavaScript code in React Native libraries for different targets

License

Notifications You must be signed in to change notification settings

baseinc/bob

 
 

Repository files navigation

@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

About

👷‍♂️ A simple CLI to build JavaScript code in React Native libraries for different targets

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 99.3%
  • JavaScript 0.7%