Skip to content

Instantly share code, notes, and snippets.

@Kishanjvaghela
Created June 20, 2019 09:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Kishanjvaghela/c6bfd3cde639735af5d6dfbf7c4a755d to your computer and use it in GitHub Desktop.
Save Kishanjvaghela/c6bfd3cde639735af5d6dfbf7c4a755d to your computer and use it in GitHub Desktop.
transformer for node modules
module.exports = {
/**
* Add search paths to the packager. Equivalent to the
* `--projectRoots` command line argument.
*
* Your app project directory is the default, but you can easily add
* additional directories.
*
* This is very handy when you maintain all your software in one big
* repo, which means your app's dependencies aren't necessarily just
* located in `./node_modules` but potentially in sibling
* directories or other locations.
*/
getProjectRoots() {
return [__dirname];
},
/**
* Specify additional file extensions for assets. For example, if
* you want to include a .ttf file, you would return ['ttf'] from
* here and use `require('./fonts/example.ttf')` inside your app.
*
* Equivalent to the `--assetExts` command line argument.
*/
getAssetExts() {
return [];
},
/**
* Specify any additional platforms to be used by the packager.
* For example, if you want to add a "custom" platform, and use modules
* ending in .custom.js, you would return ['custom'] here.
*
* Equivalent to the `--platforms` command line argument.
*/
getPlatforms() {
return [];
},
/**
* The React Native packager can be a bit fussy. For instance, it
* does not like come across duplicate packages. It can also be slow
* to traverse deep directory structures that you know won't have
* app dependencies in them. Putting those directories on the
* blacklist will stop the packager from traversing into them.
*/
getBlacklistRE() {
const blacklist = require('metro/src/blacklist');
const additionalBlacklist = [
/ignore-this-directory\/.*/,
];
return blacklist(additionalBlacklist);
},
/**
* This is the bombshell. New in React Native 0.30, this allows you
* to specify your own code transformer.
*
* In essense, instead of specifying your own `.babelrc` file,
* you'll want to specify your own transformer. That way, when
* running a regular node program such as the packager itself, the
* special transforms your app needs won't be applied.
*
* Equivalent to the `--transformer` command line argument.
*/
getTransformModulePath() {
return require.resolve('./transformer');
},
};
const babel = require('babel-core');
/**
* This is your `.babelrc` equivalent.
*/
const babelRC = {
presets: [require('babel-preset-react-native')],
plugins: [
// The following plugin will rewrite imports. Reimplementations of node
// libraries such as `assert`, `buffer`, etc. will be picked up
// automatically by the React Native packager. All other built-in node
// libraries get rewritten to their browserify counterpart.
[require('babel-plugin-rewrite-require'), {
aliases: {
constants: 'constants-browserify',
crypto: 'react-native-crypto',
dns: 'node-libs-browser/mock/dns',
domain: 'domain-browser',
fs: 'node-libs-browser/mock/empty',
http: 'stream-http',
https: 'https-browserify',
net: 'node-libs-browser/mock/net',
os: 'os-browserify/browser',
path: 'path-browserify',
querystring: 'querystring-es3',
stream: 'stream-browserify',
_stream_duplex: 'readable-stream/duplex',
_stream_passthrough: 'readable-stream/passthrough',
_stream_readable: 'readable-stream/readable',
_stream_transform: 'readable-stream/transform',
_stream_writable: 'readable-stream/writable',
sys: 'util',
timers: 'timers-browserify',
tls: 'node-libs-browser/mock/tls',
tty: 'tty-browserify',
vm: 'vm-browserify',
zlib: 'browserify-zlib',
randombytes: 'react-native-randombytes',
bip39: 'react-native-bip39',
// tweetnacl: 'tweetnacl-rn',
// You can add your own, much like webpack aliases:
'corporate-lib': 'corporate-lib-react-native',
// You can also mock any libraries that you don't need to support on
// React Native, but have to be present for 3rd party code to work:
'some-third-party-dependency': 'node-libs-browser/mock/empty',
},
throwForNonStringLiteral: true,
}],
],
};
function transform({src, filename, options}) {
const babelConfig = Object.assign({}, babelRC, {
filename,
sourceFileName: filename,
});
console.log('S================')
console.log(filename)
console.log('E================')
const result = babel.transform(src, babelConfig);
return {
ast: result.ast,
code: result.code,
map: result.map,
filename: filename,
};
}
module.exports.transform = transform;
// module.exports.transform = function(data, callback) {
// let result;
// try {
// result = transform(data.sourceCode, data.filename, data.options);
// } catch (e) {
// callback(e);
// return;
// }
// callback(null, result);
// };
@Kishanjvaghela
Copy link
Author

  • Put rn-cli.config.js and transformer.js in the root folder
  • Install all modules that used in transformer.js using npm install <module-name> --save

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment