Use "babel-preset-react-native"

Rather than specifying Babel plugins in the `.babelrc` packaged with
react-native, leverage a Babel preset to define the plugins
(https://github.com/exponentjs/babel-preset-react-native).

This allows for a much better user experience for those who want (or
need) to override options in their project's `.babelrc`.

Prior to this PR, if a user wanted to use a custom babel-plugin (or a
custom set of babel plugins), they'd have either 1) manually override
the `.babelrc` in the react-packager directory (or fork RN), or 2)
specify a custom transformer to use when running the packager that
loaded their own `.babelrc`. Note - the custom transformer was
necessary because without it, RN's `.babelrc` options would supersede
the options defined in the project's `.babelrc`...potentially causing
issues with plugin ordering.

This PR makes the transformer check for the existence of a
project-level `.babelrc`, and if it it's there, it _doesn't_ use the
react-native `.babelrc`. This prevents any oddities with Babel plugin
ordering, and leaves that up to the RN user. The RN user would then
just include a `.babelrc` file in their project that looks like:

```
{
"presets": ["react-native"]
}
```

They can then add whatever other presets or plugins that they'd like
(such as the Babel Relay Plugin or a decorators plugin, for example).

package.json

@@ -107,35 +107,12 @@
   "dependencies": {
     "absolute-path": "^0.0.0",
     "art": "^0.10.0",
-    "babel-core": "^6.1.20",
-    "babel-plugin-external-helpers-2": "^6.1.4",
-    "babel-plugin-syntax-async-functions": "^6.0.14",
-    "babel-plugin-syntax-class-properties": "^6.0.14",
-    "babel-plugin-syntax-flow": "^6.0.14",
-    "babel-plugin-syntax-jsx": "^6.0.14",
-    "babel-plugin-syntax-trailing-function-commas": "^6.0.14",
-    "babel-plugin-transform-class-properties": "^6.0.14",
-    "babel-plugin-transform-es2015-arrow-functions": "^6.0.14",
-    "babel-plugin-transform-es2015-block-scoping": "^6.0.18",
-    "babel-plugin-transform-es2015-classes": "^6.1.2",
-    "babel-plugin-transform-es2015-computed-properties": "^6.0.14",
-    "babel-plugin-transform-es2015-constants": "^6.0.15",
-    "babel-plugin-transform-es2015-destructuring": "^6.0.18",
-    "babel-plugin-transform-es2015-for-of": "^6.0.14",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.1.3",
-    "babel-plugin-transform-es2015-parameters": "^6.0.18",
-    "babel-plugin-transform-es2015-shorthand-properties": "^6.0.14",
-    "babel-plugin-transform-es2015-spread": "^6.0.14",
-    "babel-plugin-transform-es2015-template-literals": "^6.0.14",
-    "babel-plugin-transform-flow-strip-types": "^6.0.14",
-    "babel-plugin-transform-object-assign": "^6.0.14",
-    "babel-plugin-transform-object-rest-spread": "^6.0.14",
-    "babel-plugin-transform-react-display-name": "^6.0.14",
-    "babel-plugin-transform-react-jsx": "^6.0.18",
-    "babel-plugin-transform-regenerator": "^6.0.18",
-    "babel-polyfill": "^6.0.16",
-    "babel-types": "^6.1.2",
-    "babylon": "^6.1.2",
+    "babel-core": "~6.4.0",
+    "babel-plugin-external-helpers": "~6.4.0",
+    "babel-preset-react-native": "^1.0.0",
+    "babel-polyfill": "~6.3.14",
+    "babel-types": "~6.4.1",
+    "babylon": "~6.4.2",
     "base64-js": "^0.0.8",
     "bser": "^1.0.2",
     "chalk": "^1.1.1",

packager/babelRegisterOnly.js

@@ -16,7 +16,7 @@ var path = require('path');
 var _only = [];
 
 function readBabelRC() {
-  var rcpath = path.join(__dirname, 'react-packager', '.babelrc');
+  var rcpath = path.join(__dirname, 'react-packager', '.babelrc.json');
   var source = fs.readFileSync(rcpath).toString();
   return JSON.parse(source);
 }

packager/react-packager/.babelrc.json

@@ -0,0 +1,4 @@
+{
+  "presets": [ "react-native" ],
+  "plugins": []
+}

packager/transformer.js

@@ -17,44 +17,52 @@ const json5 = require('json5');
 const path = require('path');
 const ReactPackager = require('./react-packager');
 
-const babelRC =
-  json5.parse(
-    fs.readFileSync(
-      path.resolve(__dirname, 'react-packager', '.babelrc')));
+/**
+ * Return a function that, given a filename and options,
+ * returns a Babel config to be used by the transformer.
+ */
+function babelConfigBuilder() {
+  const projectBabelRCPath = path.resolve(__dirname, '..', '..', '..', '.babelrc');
 
-function transform(src, filename, options) {
-  options = options || {};
+  let babelRC = { plugins: [] };
 
-  const extraPlugins = ['external-helpers-2'];
-  const extraConfig = {
-    filename,
-    sourceFileName: filename,
-  };
+  // If a babelrc exists in the project, don't use the one provided with react-native.
+  if (!fs.existsSync(projectBabelRCPath)) {
+    babelRC = json5.parse(
+      fs.readFileSync(
+        path.resolve(__dirname, 'react-packager', '.babelrc.json')));
+  }
 
-  const config = Object.assign({}, babelRC, extraConfig);
+  return (filename, options) => {
+    const extraConfig = {
+      filename,
+      sourceFileName: filename,
+    };
 
-  if (options.inlineRequires) {
-    extraPlugins.push(inlineRequires);
-  }
-  config.plugins = extraPlugins.concat(config.plugins);
-
-  // Manually resolve all default Babel plugins. babel.transform will attempt to resolve
-  // all base plugins relative to the file it's compiling. This makes sure that we're
-  // using the plugins installed in the react-native package.
-  config.plugins = config.plugins.map(function(plugin) {
-    // Normalise plugin to an array.
-    if (!Array.isArray(plugin)) {
-      plugin = [plugin];
-    }
-    // Only resolve the plugin if it's a string reference.
-    if (typeof plugin[0] === 'string') {
-      plugin[0] = require(`babel-plugin-${plugin[0]}`);
-      plugin[0] = plugin[0].__esModule ? plugin[0].default : plugin[0];
+    const config = { ...babelRC, ...extraConfig };
+
+    // Add extra plugins
+    const extraPlugins = [require('babel-plugin-external-helpers')];
+
+    if (options.inlineRequires) {
+      extraPlugins.push(inlineRequires);
     }
-    return plugin;
-  });
+    config.plugins = extraPlugins.concat(config.plugins);
+
+    return {
+      ...babelRC,
+      ...config
+    };
+  };
+}
+
+const buildBabelConfig = babelConfigBuilder();
+
+function transform(src, filename, options) {
+  options = options || {};
 
-  const result = babel.transform(src, Object.assign({}, babelRC, config));
+  const babelConfig = buildBabelConfig(filename, options);
+  const result = babel.transform(src, babelConfig);
 
   return {
     code: result.code,