How to enable Babel options

[kinhunt]

sorry, looks like a dummy question, but I cannot find it anywhere. thx

[timzaak]

I copy the transformer.js to my-transformer.js, and put it in my project root directory. then change the scripts in package.json to node_modules/react-native/packager/packager.sh --transformer=my-transformer.js you can add your Babel options to my-transformer.js whitelist.

[timzaak]

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * Note: This is a fork of the fb-specific transform.js
 */
'use strict';

const babel = require('./node_modules/react-native/node_modules/babel-core');
const inlineRequires = require('./node_modules/react-native/node_modules/fbjs-scripts/babel/inline-requires');

function transform(src, filename, options) {
  const plugins = [];

  if (process.env.NODE_ENV === 'production') {
    plugins.push('node-env-inline', 'dunderscore-dev-inline');
  } else if (process.env.NODE_ENV === 'test') {
    plugins.push({
      position: 'after',
      transformer: inlineRequires,
    });
  }

  const result = babel.transform(src, {
    retainLines: true,
    compact: true,
    comments: false,
    filename,
    whitelist: [
      // Keep in sync with packager/react-packager/.babelrc
      'es6.arrowFunctions',
      'es6.blockScoping',
      'es6.classes',
      'es6.constants',
      'es6.destructuring',
      'es6.parameters',
      'es6.properties.computed',
      'es6.properties.shorthand',
      'es6.spread',
      'es6.templateLiterals',
      'es6.modules',
      'es7.asyncFunctions',
      'es7.trailingFunctionCommas',
      'es7.objectRestSpread',
      'es7.decorators',
      'es7.classProperties',
      'flow',
      'react',
      'react.displayName',
      'regenerator'

    ],
    plugins,
    sourceFileName: filename,
    sourceMaps: false,
    extra: options || {},
  });

  return {
    code: result.code
  };
}

module.exports = function(data, callback) {
  let result;
  try {
    result = transform(data.sourceCode, data.filename);
  } catch (e) {
    callback(e);
    return;
  }
  callback(null, result);
};

// export for use in jest
module.exports.transform = transform;

this may help you

[kinhunt]

thank you. it worked

[pickhardt]

@timzaak do you need to do anything else special after, like npm install or anything? I don't see why you would, however, I have done everything you said and it isn't working. From debugging I can see that packager.js and parseCommandLine.js are not seeing the option for transformer. If I console.log(process.argv) I get this array

[ '/usr/local/Cellar/iojs/2.3.0/bin/iojs',
  '/Users/jrp/projects/MyApp/node_modules/react-native/packager/packager.js' ]

My package.json contains

  "scripts": {
    "start": "node_modules/react-native/packager/packager.sh --transformer=transformer.js"
  },

[pickhardt]

Looks like you can just add a .babelrc file to the project, instead of defining your own custom transformer.

[timzaak]

@pickhardt you can find transformer config in packager.js line:48. and I use node V4.0, the react-native code is the lastest master branch.

[pickhardt]

Curious, why create a new transformer instead of just using a babelrc file?

[timzaak]

with the lastest master branch, It works with .babelrc file.