react-native-esbuild

⚡️ An extremely fast bundler + React Native

Features

⚠️ This project is under development

⚡️ Blazing Fast Build
🌳 Tree Shaking
💾 In-memory & Local File System Caching
🎨 Flexible & Extensible
🚀 Support Hermes environment
⭐️ Support Live Reload
🐛 Support Debugging (Flipper, Chrome Debugger)
~~🌍 Support Web~~ (WIP)
~~🔥 Support Fabric~~ (WIP)

Setup

# using npm
npm install -D install @react-native-esbuild/cli

# using yarn
yarn add -D @react-native-esbuild/cli

// <project-root>/react-native-esbuild.config.js

/**
 * @type {import('@react-native-esbuild/config').ReactNativeEsbuildConfig}
 */
exports.default = {
  transform: {
    // convert `.svg` assets to `react-native-svg` based component using `@svgr/core`
    svgr: true,
    // strip flow syntax
    stripFlowPackageNames: ['react-native'],
    // fully transform based on `metro-react-native-babel-preset` (slow)
    fullyTransformPackageNames: [],
    // custom babel transform rules
    customTransformRules: [],
  },
};

If you looking for more configurations, go to CONFIGURATIONS.md.

Android

# using npm
npm install -D @react-native/gradle-plugin

# using yarn
yarn add -D @react-native/gradle-plugin

Go to android/settings.gradle.

If react-native-gradle-plugin already included, replace to @react-native/gradle-plugin

- includeBuild('../node_modules/react-native-gradle-plugin')
+ includeBuild('../node_modules/@react-native/gradle-plugin')

Go to node_modules/@react-native/gradle-plugin/src/main/kotlin/com/facebook/react/TaskConfiguration.kt

// The location of the cli.js file for React Native

- val cliFile = detectedCliFile(config)
+ val cliFile = File(config.root.dir("node_modules/@react-native-esbuild/cli/dist/index.js").get().asFile.absolutePath)

and then sync gradle project.

If you want to keep those changes in your environment, checkout patch-package.

patch-package @react-native/gradle-plugin

iOS

Open XCode, go to Build Target > Build Phases > Bundle React Native code and images and add CLI_PATH environment variable.

set -e

+ CLI_PATH="../node_modules/@react-native-esbuild/cli/dist/index.js"

WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh"
REACT_NATIVE_XCODE="../node_modules/react-native/scripts/react-native-xcode.sh"

/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"

Start

Launch dev server

rne start

Option	Description	Default value
`--entry-file`	entry file path	`index.js`
`--host`	dev server host	`localhost`
`--port`	dev server port	`8081`
`--verbose`	show cli debug log	`false`
`--reset-cache`	reset transform cache	`false`

Bundle

Build bundle

rne bundle --platform=<platform> --bundle-output=<dest>

Option	Description	Default value
`--entry-file`	entry file path	`index.js`
`--platform`	(required) platform for resolve modules
`--bundle-output`	(required) bundle output file destination
`--sourcemap-output`	sourcemap file destination
`--assets-dest`	assets directory
`--dev`	set as development environment	`true`
`--minify`	enable minify	`false`
`--verbose`	print all logs	`false`
`--reset-cache`	reset transform cache	`false`

Cache

Manage transform cache

# clear transform cache in temporary directory
rne cache clear

Customize

Plugins

import {
  ReactNativeEsbuildBundler,
  type EsbuildPluginFactory,
} from '@react-native-esbuild/core';
import {
  createAssetRegisterPlugin,
  createHermesTransformPlugin,
  createSvgTransformPlugin,
} from '@react-native-esbuild/plugins';

const bundler = new ReactNativeEsbuildBundler(/* bundler config */);

const createMyPlugin: EsbuildPluginFactory<MyPluginConfigType> = (pluginConfig) => {
  return function myPlugin (context) {
    return {
      // implement your custom esbuild plugin here
      name: 'your-custom-esbuild-plugin',
      setup: (build): void {
        // ...
      },
    },
  };
};

bundler
  .registerPlugin(createAssetRegisterPlugin())
  .registerPlugin(createSvgTransformPlugin())
  .registerPlugin(createHermesTransformPlugin())
  // register custom esbuild plugin
  .registerPlugin(createMyPlugin(config));

Development

# in example directory,
# run example application (start @react-native-esbuild/dev-server)
yarn start

# build example project (example/dist/<bundle and assets>)
yarn build:android
yarn build:ios

# run yarn commands
yarn workspace <workspaceName> <command>

# build all packages or specified package only
lerna run build
lerna run build --scope @react-native-esbuild/xxx

# run all test or specified package only
yarn test
yarn test --selectProjects <workspaceName>

# show project dependencies graph
nx graph

Architecture

Read ARCHITECTURE.md.

Benchmark

# in `example` directory

# react-native-esbuild (with cache)
time yarn build:android
time yarn build:ios
# react-native-esbuild (without cache)
time yarn build:android --reset-cache
time yarn build:ios --reset-cache

# metro (with cache)
time yarn metro:android
time yarn metro:ios
# metro (without cache)
time yarn metro:android --reset-cache
time yarn metro:ios --reset-cache

License

MIT

jeongshin / react-native-esbuild Goto Github PK