Skip to content
This repository was archived by the owner on Apr 9, 2020. It is now read-only.

v1.0.0

Choose a tag to compare

@gaearon gaearon released this 19 Sep 16:41
· 24 commits to master since this release

Breaking Change

The transform no longer takes precautions to become a no-op in production environment or environment with undefined module.hot. It is now your responsibility to only enable it in development environment.

React

Make sure to wrap your React Transform configuration into env.development inside .babelrc:

{
  "stage": 0,
  "env": {

    // only enable it when process.env.NODE_ENV is not 'production'

    "development": {
      "plugins": ["react-transform"],
      "extra": {
        "react-transform": [{
          "target": "react-transform-hmr",
          "imports": ["react"],
          "locals": ["module"]
        }]
      }
    }
  }
}

Then make sure you're running Babel with NODE_ENV=production in the production.

React Native

For React Native users, .babelrc doesn't work well with React Transform, so just make sure to configure React Transform inside the Webpack config only when hot mode is enabled:

var config = {

  /* ... */

  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        stage: 0,
        plugins: []
      }
    }]
  },

  plugins: []
};

if (process.env.HOT) {
  config.devtool = 'eval';
  config.entry['index.ios'].unshift('react-native-webpack-server/hot/entry');
  config.entry['index.ios'].unshift('webpack/hot/only-dev-server');
  config.entry['index.ios'].unshift('webpack-dev-server/client?http://localhost:8082');
  config.output.publicPath = 'http://localhost:8082/';
  config.plugins.unshift(new webpack.HotModuleReplacementPlugin());

  // Note: enabling React Transform and React Transform HMR:

  config.module.loaders[0].query.plugins.push('react-transform');
  config.module.loaders[0].query.extra = {
    'react-transform': [{
      target: 'react-transform-hmr',
      imports: ['react-native'],
      locals: ['module']
    }]
  };
}