|
| 1 | +# @react-native-community/bob |
| 2 | + |
| 3 | +Simple CLI to build React Native libraries for different targets. |
| 4 | + |
| 5 | +## Features |
| 6 | + |
| 7 | +The CLI can build code for following targets: |
| 8 | + |
| 9 | +- Generic CommonJS build |
| 10 | +- ES modules build for bundlers such as webpack |
| 11 | +- Flow definitions (copies .js files to .flow files) |
| 12 | +- TypeScript definitions (uses tsc to generate declaration files) |
| 13 | + |
| 14 | +## Why? |
| 15 | + |
| 16 | +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. |
| 17 | + |
| 18 | +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. |
| 19 | + |
| 20 | +Bob wraps tools such as `babel-cli` and simplifies these common tasks across multiple projects. It's tailored specifically to React Native projects to minimize the configuration required. |
| 21 | + |
| 22 | +## Installation |
| 23 | + |
| 24 | +Open a Terminal in your project, and run: |
| 25 | + |
| 26 | +```sh |
| 27 | +yarn add --dev @react-native-community/bob |
| 28 | +``` |
| 29 | + |
| 30 | +## Usage |
| 31 | + |
| 32 | +In your `package.json`, specify the targets to build for: |
| 33 | + |
| 34 | +```json |
| 35 | +"@react-native-community/bob": { |
| 36 | + "targets": [ |
| 37 | + "commonjs", |
| 38 | + "module", |
| 39 | + "typescript" |
| 40 | + ] |
| 41 | +} |
| 42 | +``` |
| 43 | + |
| 44 | +Then add `bob` to your `prepare` step: |
| 45 | + |
| 46 | +```js |
| 47 | +"scripts": { |
| 48 | + "prepare": "bob build" |
| 49 | +} |
| 50 | +``` |
| 51 | + |
| 52 | +And finally, configure the appropriate entry points: |
| 53 | + |
| 54 | +```json |
| 55 | +"main": "commonjs/index.js", |
| 56 | +"module": "module/index.js", |
| 57 | +"react-native": "src/index.js", |
| 58 | +"types": "typescript/index.d.ts", |
| 59 | +"files": [ |
| 60 | + "commonjs/", |
| 61 | + "module/", |
| 62 | + "src/", |
| 63 | + "typescript/" |
| 64 | +] |
| 65 | +``` |
| 66 | + |
| 67 | +And we're done 🎉 |
0 commit comments