Metro Bundler
When we run react-native start
both a node.js server and metro bundler are started.
- Metro can be thought of as similar to "webpack for react native"
Metro is a JavaScript bundler; It takes in an entry file and various options, and gives you back a single JavaScript file that includes all your code and its dependencies.
- Metro builds a dependency graph of all modules required from the entry point (ie, our whole react-native app)
- Metro transforms modules into a format that React-Native can understand
- Metro serializes the transformed modules to form a bundle
- A bundle is just a bunch of modules combined into a single js file.
- The bundlefile gets installed on the device, where its code is then executed.
- Remember that when you are writing code for a React Native application, your code is not "translated" to Java/Swift/whatever. The Native Modules will send events to a Javascript thread, and the JS thread will execute your bundled React Native code.
I/O of Metro
- Input - entryfile along with any options
- Output - the bundle
Metro bundler is not used for production
- ex. running
react-native run-ios --configuration Release
The Bundle
The bundlefile can be found at localhost:8081/index.bundle?platform=ios&dev=true&minify=false
.
- This is the API through which the device will access the bundle
- this is served from memory, therefore does get written into our project directory
- The bundle may be stored in different formats, such as binary or .bundle file.
- Metro bundler also translates JSX to standard javascript