⚠️ 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)
# 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.
# 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
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"
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 |
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 |
Manage transform cache
# clear transform cache in temporary directory
rne cache clear
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));
# 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
Read ARCHITECTURE.md.
# 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