Bob — The React Native Library Builder

No items found.

In short

In this article we introduce Bob - the React Native library builder. Though publishing React Native libraries as source code is common, it can lead to many technical issues. Compiling the code is important for Jest, bundlers like Webpack, and server-side rendering. Bob automates the compilation process and simplifies it.

Compiling the code

It’s a common practice to publish React Native libraries as source code without building them. Metro handles compiling JavaScript and TypeScript files by default, so it mostly works.

But there are many reasons you should compile your JavaScript and TypeScript code when publishing.

  • Jest doesn’t compile code under node_modules by default, so it’s extra work for users to configure Jest when testing.
  • It’s common to exclude node_modules when compiling for bundlers such as Webpack. If your library is cross-platform and supports web, it should have first-class support for other bundlers.
  • If your library supports web, you should pre-compile it so that the user can import it in Node for SSR.

The main reason many people don’t compile the code when publishing is because it’s not straightforward. We need to take care of many things, for example, different entry points and babel configuration for different targets. If we use a static type checker such as Flow or TypeScript, we also need to take care of generating and publishing the type definitions.

Bob's mission

We built Bob to simplify this and take care of it automatically. All the scripts and Babel config are abstracted away. It can also automatically configure your project to use it just by running yarn bob init.

Currently, it handles the following targets:

  • 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)

Bob’s goal is to standardize these build scripts across the React Native libraries in the community. We plan to implement more things in the future, including a watch mode.

There's a repo with installation and usage instructions. If you face any issues with version, please report them on our Bob issue tracker, and don’t forget to star it.

FAQ

No items found.
React Galaxy City
Get our newsletter

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

Callstack astronaut
Download our ebook

I agree to receive electronic communications By checking any of the boxes, you give us consent to use your email address for our direct marketing purposes, including the latest tech & biz updates. We will process your email address and names (if you have entered them into the above form) until you withdraw your consent to the processing of your names, or unsubscribe, or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

By pressing the “Download” button, you give us consent to use your email address to send you a copy of the Ultimate Guide to React Native Optimization.