https://github.com/tdzl2003/metro-transformer-registry

https://github.com/tdzl2003/metro-transformer-registry

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/tdzl2003/metro-transformer-registry
• Owner: tdzl2003
• Created: 2017-11-27T17:58:41.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2017-12-01T04:31:49.000Z (almost 7 years ago)
• Last Synced: 2024-04-22T11:21:06.855Z (7 months ago)
• Language: JavaScript
• Size: 3.91 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Metro-Transformer-Registry

Use different transformers in [metro-bundler](https://npmjs.com/package/metro-bundler), which is the main bundler for [react-native](https://facebook.github.io/react-native)

## Usage

First install dependencies:

```bash

yarn add metro-transformer-registry

```

Config your 'rn-cli.config.js'

```javascript

'use strict';

const path = require('path');

const blacklist = require('metro-bundler/src/blacklist');

const config = {

  // Define file extensions for every source code.

  getSourceExts() {

    return ['js', 'json', 'ts', 'tsx', 'txt'];

  },

  // Use Metro-Transformer-Registry as transformer entry.

  getTransformModulePath() {

    return require.resolve('metro-transformer-registry');

  },

  // Define every rule list.

  getTransformRuleList() {

    return [

      {

        include: '/\.tsx?$',

        transformer: require('metro-transformer-registry/transformers/typescript'),

      },

      {

        include: '/\.txt$',

        transformer: require('metro-transformer-registry/transformers/raw'),

      },

    ]

  }

};

module.exports = config;

```

If you wish to use typescript with react native, you also should install following dependencies: 

```bash

yarn add typescript sourcemap

```

and add a tsconfig.json file:

```json

{

  "compilerOptions": {

    "module": "commonjs",

    "target": "es5",

    "sourceMap": true,

    "jsx": "react",

    "strict": true,

    "importHelpers": true,

    "noImplicitAny": true,

    "experimentalDecorators": true,

    "outDir": "./lib",

    "rootDir": "./src",

    "lib": [

      "es5",

      "es6",

      "es2015",

      "DOM"

    ]

  },

  "compileOnSave": false,

  "exclude": [

    "node_modules"

  ]

}

```