CODEWITHSUNDEEP
react-nativebabeljsexpo
island_builer
island_builer

Reputation: 21

Bundling workflow in expo react-native

What are the steps of the bundling/packaging process? I know there are expo-cli, babel, metro... but do not get how they call each other to produce the final javascript bundle.

Any ideas or direction?

P/S: in a specific case, I want to ignore some files from being bundled, but do not know where to config this.

Upvotes: 0

Views: 360

Answers (1)

island_builer
island_builer

Reputation: 21

Just for anyone who may need this...

The flow is expo-cli call the react-native's local-cli at (node_modules\react-native\local-cli), which will transform the code with babel and package them with metro. expo-cli also pass packager options likes packagerOpts to react-native.

Also this article is helpful to understand babel: https://kleopetrov.me/2016/03/18/everything-about-babel/

In my specific case, I modify app.json like this:

...
"packagerOpts": {
  "assetExts": ["ttf", "tkon"]
},
"assetBundlePatterns": ["./app/config/*.tkon"]
...

which tells the packager that all files with .tkon extension is asset. They will be exclude from the final JS bundle, and can be required as asset.

Later I load this asset with:

let asset = Asset.fromModule(require('../../config/products.tkon'));
await asset.downloadAsync();
let data = await FileSystem.readAsStringAsync(asset.localUri);
data = JSON.parse(data);

That's it

Upvotes: 1

Related Questions