Babel Configuration File for a Nicer Development Environment

.babelrc

{
  "presets": [
    "react-native"
  ],
  "plugins": [
    "transform-strict-mode",
    [ "auto-import", 
      { "declarations": [
        { "default": "React",   "path": "react"  },
        { "default": "_",       "path": "lodash" },
        { "default": "Promise", "path": "bluebird" }
      ]}
    ],
    "react-display-name"
  ],
  "env": {
    "development": {
      "plugins": [
        "transform-react-jsx-self",
        "transform-react-jsx-source"
      ]
    },
    "production": {
      "presets": [
        "minify"
      ],
      "plugins": [
        "react-constant-elements",
        "lodash"
      ]
    }
  }
}

Installation

Replace your existing .babelrc (https://github.com/BeeWell/development/blob/master/patient-mobile/mobile/bsncApp/.babelrc) with the file above.

In the same directory as that .babelrc file, execute this huge statement on your command line.

npm install --save-dev babel-preset-env babel-preset-react-native babel-plugin-transform-strict-mode babel-plugin-auto-import babel-plugin-react-display-name babel-plugin-lodash babel-preset-minify babel-plugin-react-constant-elements babel-plugin-transform-react-jsx-source babel-plugin-transform-react-jsx-self

Here's everything this does.

• Automatically uses Strict Mode on all your files for improved safety and performance.
• Automatically imports React as React, Lodash as _, and Bluebird as Promise.
• Adds the display name property to any hand-instantiated React components.

In development (eg: when NODE_ENV is unset or set to anything other than "production"), the following also happens:

• Adds in __self to the React components, which React uses to improve error messaging.
• Adds in __source to the React components, which contains line number and file name where the component was instantiated, so you can view/log those if you're curious.

In production (eg: when NODE_ENV="production"), the following also happens:

• Hoists constant React components to speed up diffing and rendering.
• Minimizes the code.
• Picks out the particular Lodash modules that you're building, so you don't include everything from Lodash in your resulting bundle.