What is metro bundler in react-native?
up vote
8
down vote
favorite
I am learning react-native.
I don't find proper documentation for metro bundler.So, I have few questions on it.
As the name suggest it creates a bundle.
- But where is the bundle file located ?
- Is this same as webpack ?
- What is the use of that bundle file ?
react-native native react-native-android react-native-ios
edited 18 hours ago
Md. Mokammal Hossen Farnan
293316
asked Jun 30 at 16:52
Piyush
100112
add a comment |
up vote
8
down vote
favorite
I am learning react-native.
I don't find proper documentation for metro bundler.So, I have few questions on it.
As the name suggest it creates a bundle.
- But where is the bundle file located ?
- Is this same as webpack ?
- What is the use of that bundle file ?
react-native native react-native-android react-native-ios
edited 18 hours ago
Md. Mokammal Hossen Farnan
293316
asked Jun 30 at 16:52
Piyush
100112
add a comment |
up vote
8
down vote
favorite
up vote
8
down vote
favorite
I am learning react-native.
I don't find proper documentation for metro bundler.So, I have few questions on it.
As the name suggest it creates a bundle.
- But where is the bundle file located ?
- Is this same as webpack ?
- What is the use of that bundle file ?
react-native native react-native-android react-native-ios
edited 18 hours ago
Md. Mokammal Hossen Farnan
293316
asked Jun 30 at 16:52
Piyush
100112
I am learning react-native.
I don't find proper documentation for metro bundler.So, I have few questions on it.
As the name suggest it creates a bundle.
- But where is the bundle file located ?
- Is this same as webpack ?
- What is the use of that bundle file ?
react-native native react-native-android react-native-ios
react-native native react-native-android react-native-ios
edited 18 hours ago
Md. Mokammal Hossen Farnan
293316
asked Jun 30 at 16:52
Piyush
100112
edited 18 hours ago
Md. Mokammal Hossen Farnan
293316
asked Jun 30 at 16:52
Piyush
100112
edited 18 hours ago
Md. Mokammal Hossen Farnan
293316
edited 18 hours ago
Md. Mokammal Hossen Farnan
293316
edited 18 hours ago
Md. Mokammal Hossen Farnan
293316
293316
asked Jun 30 at 16:52
Piyush
100112
asked Jun 30 at 16:52
Piyush
100112
asked Jun 30 at 16:52
Piyush
100112
100112
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
2
down vote
A React Native app is a compiled app that is running some Javascript. Whenever you build and run your React Native project, a packager starts up called Metro. You’ve probably seen this output in your terminal before, letting your know the packager is running.
The packager does a few things:
Combines all your Javascript code into a single file, and translates any Javascript code that your device won’t understand (like JSX or some of the newer JS syntax).
Converts assets (e.g. PNG files) into objects that can be displayed by an Image component.
reference:
https://hackernoon.com/understanding-expo-for-react-native-7bf23054bbcd
answered Aug 18 at 7:19
mahdi sharifi
212
add a comment |
up vote
0
down vote
Metro is a JavaScript bundler which takes in options, an entry file, and gives you a JavaScript file including all JavaScript files back. Every time you run a react native project, a compilation of many javascript files are done into a single file. This compilation is done by a bundler which is called Metro.
Answers to your questions:
1> Bundled file is located on the device itself on which you are building your app and is stored in different formats like in case of Android Plain bundling in which .bundle is created. Another format is of Indexed RAM bundle in which file is stored as binary file.
2> Webpack is also a similar type of module bundler which does bundling to ReactJS web platform and its modules are accessible through browser. Bundling process is while similar to metro.
3> These bundled files are indexed and stored in a particular numerical format and thus its easy at the run time to arrange JS files in order.
There are multiple functions of Metro bundler and you can read about the role of Metro in React Native here : https://medium.com/@rishabh0297/role-of-metro-bundler-in-react-native-24d178c7117e
Hope it helps.
answered 20 hours ago
Rishabh Sharma
263
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
A React Native app is a compiled app that is running some Javascript. Whenever you build and run your React Native project, a packager starts up called Metro. You’ve probably seen this output in your terminal before, letting your know the packager is running.
The packager does a few things:
Combines all your Javascript code into a single file, and translates any Javascript code that your device won’t understand (like JSX or some of the newer JS syntax).
Converts assets (e.g. PNG files) into objects that can be displayed by an Image component.
reference:
https://hackernoon.com/understanding-expo-for-react-native-7bf23054bbcd
answered Aug 18 at 7:19
mahdi sharifi
212
add a comment |
up vote
2
down vote
A React Native app is a compiled app that is running some Javascript. Whenever you build and run your React Native project, a packager starts up called Metro. You’ve probably seen this output in your terminal before, letting your know the packager is running.
The packager does a few things:
Combines all your Javascript code into a single file, and translates any Javascript code that your device won’t understand (like JSX or some of the newer JS syntax).
Converts assets (e.g. PNG files) into objects that can be displayed by an Image component.
reference:
https://hackernoon.com/understanding-expo-for-react-native-7bf23054bbcd
answered Aug 18 at 7:19
mahdi sharifi
212
add a comment |
up vote
2
down vote
up vote
2
down vote
A React Native app is a compiled app that is running some Javascript. Whenever you build and run your React Native project, a packager starts up called Metro. You’ve probably seen this output in your terminal before, letting your know the packager is running.
The packager does a few things:
Combines all your Javascript code into a single file, and translates any Javascript code that your device won’t understand (like JSX or some of the newer JS syntax).
Converts assets (e.g. PNG files) into objects that can be displayed by an Image component.
reference:
https://hackernoon.com/understanding-expo-for-react-native-7bf23054bbcd
answered Aug 18 at 7:19
mahdi sharifi
212
A React Native app is a compiled app that is running some Javascript. Whenever you build and run your React Native project, a packager starts up called Metro. You’ve probably seen this output in your terminal before, letting your know the packager is running.
The packager does a few things:
Combines all your Javascript code into a single file, and translates any Javascript code that your device won’t understand (like JSX or some of the newer JS syntax).
Converts assets (e.g. PNG files) into objects that can be displayed by an Image component.
reference:
https://hackernoon.com/understanding-expo-for-react-native-7bf23054bbcd
answered Aug 18 at 7:19
mahdi sharifi
212
answered Aug 18 at 7:19
mahdi sharifi
212
answered Aug 18 at 7:19
mahdi sharifi
212
answered Aug 18 at 7:19
mahdi sharifi
212
212
add a comment |
add a comment |
up vote
0
down vote
Metro is a JavaScript bundler which takes in options, an entry file, and gives you a JavaScript file including all JavaScript files back. Every time you run a react native project, a compilation of many javascript files are done into a single file. This compilation is done by a bundler which is called Metro.
Answers to your questions:
1> Bundled file is located on the device itself on which you are building your app and is stored in different formats like in case of Android Plain bundling in which .bundle is created. Another format is of Indexed RAM bundle in which file is stored as binary file.
2> Webpack is also a similar type of module bundler which does bundling to ReactJS web platform and its modules are accessible through browser. Bundling process is while similar to metro.
3> These bundled files are indexed and stored in a particular numerical format and thus its easy at the run time to arrange JS files in order.
There are multiple functions of Metro bundler and you can read about the role of Metro in React Native here : https://medium.com/@rishabh0297/role-of-metro-bundler-in-react-native-24d178c7117e
Hope it helps.
answered 20 hours ago
Rishabh Sharma
263
add a comment |
up vote
0
down vote
Metro is a JavaScript bundler which takes in options, an entry file, and gives you a JavaScript file including all JavaScript files back. Every time you run a react native project, a compilation of many javascript files are done into a single file. This compilation is done by a bundler which is called Metro.
Answers to your questions:
1> Bundled file is located on the device itself on which you are building your app and is stored in different formats like in case of Android Plain bundling in which .bundle is created. Another format is of Indexed RAM bundle in which file is stored as binary file.
2> Webpack is also a similar type of module bundler which does bundling to ReactJS web platform and its modules are accessible through browser. Bundling process is while similar to metro.
3> These bundled files are indexed and stored in a particular numerical format and thus its easy at the run time to arrange JS files in order.
There are multiple functions of Metro bundler and you can read about the role of Metro in React Native here : https://medium.com/@rishabh0297/role-of-metro-bundler-in-react-native-24d178c7117e
Hope it helps.
answered 20 hours ago
Rishabh Sharma
263
add a comment |
up vote
0
down vote
up vote
0
down vote
Metro is a JavaScript bundler which takes in options, an entry file, and gives you a JavaScript file including all JavaScript files back. Every time you run a react native project, a compilation of many javascript files are done into a single file. This compilation is done by a bundler which is called Metro.
Answers to your questions:
1> Bundled file is located on the device itself on which you are building your app and is stored in different formats like in case of Android Plain bundling in which .bundle is created. Another format is of Indexed RAM bundle in which file is stored as binary file.
2> Webpack is also a similar type of module bundler which does bundling to ReactJS web platform and its modules are accessible through browser. Bundling process is while similar to metro.
3> These bundled files are indexed and stored in a particular numerical format and thus its easy at the run time to arrange JS files in order.
There are multiple functions of Metro bundler and you can read about the role of Metro in React Native here : https://medium.com/@rishabh0297/role-of-metro-bundler-in-react-native-24d178c7117e
Hope it helps.
answered 20 hours ago
Rishabh Sharma
263
Metro is a JavaScript bundler which takes in options, an entry file, and gives you a JavaScript file including all JavaScript files back. Every time you run a react native project, a compilation of many javascript files are done into a single file. This compilation is done by a bundler which is called Metro.
Answers to your questions:
1> Bundled file is located on the device itself on which you are building your app and is stored in different formats like in case of Android Plain bundling in which .bundle is created. Another format is of Indexed RAM bundle in which file is stored as binary file.
2> Webpack is also a similar type of module bundler which does bundling to ReactJS web platform and its modules are accessible through browser. Bundling process is while similar to metro.
3> These bundled files are indexed and stored in a particular numerical format and thus its easy at the run time to arrange JS files in order.
There are multiple functions of Metro bundler and you can read about the role of Metro in React Native here : https://medium.com/@rishabh0297/role-of-metro-bundler-in-react-native-24d178c7117e
Hope it helps.
answered 20 hours ago
Rishabh Sharma
263
answered 20 hours ago
Rishabh Sharma
263
answered 20 hours ago
Rishabh Sharma
263
answered 20 hours ago
Rishabh Sharma
263
263
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51116811%2fwhat-is-metro-bundler-in-react-native%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
