How can I view the javascript bundle code in React Native?

Question

I have a React Native 0.57.8 project that uses TypeScript and Babel 7.

I would like to see the javascript code that is in the bundle so I can see what TypeScript and Babel have modified. Specifically, I am trying to see how TS and Babel handle default parameters for a class constructor.

I am aware the TS will add this.parameter = parameter to a class constructor body if the constructor parameters are given a modifier such as public, private, or readonly, but I don't know if this.parameter = parameter is added to the beginning of the constructor body, or end of the constructor body.

Is there a way I can view the javascript output that TS and Babel create?

Answer 1

You can generate the bundle yourself and then inspect it.

Either visit the Metro Bundler url when it's running on a terminal, e.g. http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false.

(This might require a full generation if it's not cached already, so it can take a while).

Or just generate a static file through the command line:

// iOS
npx react-native bundle --entry-file=index.js --bundle-output='./bundle.js' --dev=false --platform='ios' --assets-dest='./ios' --reset-cache
// Android
npx react-native bundle --entry-file=index.js --bundle-output='./bundle.js' --dev=false --platform='android' --assets-dest='./android/app/src/main/res' --reset-cache