[Packager] How to configure Babel?

[jtremback]

My code is using async/await. How can I configure the Babel instance in the packager?

[jtremback]

How about having the packager look for a .babelrc, or in package.json like the standalone Babel does? It could fall back to the existing settings if one is not found.

[brentvatne]

I believe I see that being mentioned elsewhere but can't seem to find it cc @ide

[jtremback]

Is there any react-native specific reason not to use any of the experimental transforms?

[ide]

@brentvatne were you thinking about this? https://twitter.com/amasad/status/604057791859445760

[brentvatne]

@ide that's the one :) thanks

[johanneslumpe]

So how should we read the .babelrc file? babel-core already provides a tool to read and parse the file, but unfortunately it's not exposed. And since react-native requires babel but not babel-core directly, it might be very ugly to do a nested require into babel/node_modules/babel-core.

But copying the file does not seem like the right solution. Would be nice to figure out a way to get a hold of that function so we could just require it. Thoughts?

[ide]

@johanneslumpe would things be easier if RN depended on babel-core directly?

[jtremback]

#1469

[johanneslumpe]

@ide i believe so, but now we have @jtremback's PR. I wanted to make use of the internal function, and avoid writing custom code, as babel's resolve-rc function is a bit more involved that just loading a single file. It allows multiple .babel-rc files etc. But that might actually not be needed here.

[sebmck]

I can expose that method if you want.

[sebmck]

Actually, as long as this variable is an absolute path then the .babelrc files will be resolved and merged into the input options.

[jtremback]

So, filename is used for error messages, and to find .babelrc?

[sebmck]

Yep.

[jtremback]

Here are my findings:

The packager will load .babelrc, IF resetCache is true: https://github.com/jtremback/rnTest3/blob/master/node_modules/react-native/packager/packager.js#L206

I found this out by putting a syntax error in .babelrc. However, it will apparently not merge the whitelist. Adding and removing transforms has no effect.

[amasad]

Yeah, you need to reset the cache when changing anything about the compiler. Any ideas of how we can incorporate .babelrc in the cache hash?
https://github.com/facebook/react-native/blob/master/packager/react-packager/src/JSTransformer/Cache.js#L160-L170

[amasad]

Also should we mention .babelrc in the docs?

[amasad]

@sebmck do you have any ideas on how to override the whitelist via babelrc?

[sebmck]

@amasad Babel actually has it's own cache here for performance. So changes to .babelrc wont be reflect without a complete restart. There's currently no way to override specific options. The current .babelrc behaviour is pretty weird, it merges all parent configs which is kinda nasty. Hoping to make it more inline with other config files in the future with an extends property instead of doing the word directory inheritance stuff.

[dozoisch]

👍 That would be awesome

[schickling]

+1

[cgarvis]

👍

[amasad]

cc @martinbigio (maybe we can find a way to make this easier as we're redesigning the transformer API)

[es6Test]

Just trying my 1st RN app and when I run npm start I get the error:

const babel = require('babel-core');
^^^^^
SyntaxError: Use of const in strict mode.
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)

[es6Test]

Ignore, nvm forgot to use 4.1.2

[tenorok]

Hello, guys!
Sorry, but I not understood how can I extend Babel config?
For example, I need class properties transform.
Can you explain please?

[skoch-fixeads]

@tenorok You need create your .babelrc and add this babel-presenter: babel-preset-react-native
https://github.com/facebook/react-native/tree/master/babel-preset

{ "presets": ["es2015", "react-native"], "compact" : true }

by @stvkoch