How do you configure babel to run with different configurations in different environments

Question

I want to add tape testing to my react/redux app. I can't find a way for my app to work both for testing and running. With this .babelrc configuration tests don't run but app works fine:

{   "stage": 2,   "env": {     "development": {       "plugins": [         "react-transform"       ],       "extra": {         "react-transform": {           "transforms": [{             "transform": "react-transform-hmr",             "imports": ["react"],             "locals":  ["module"]           }]         }       }     }   } } 

With this .babelrc configuration tests work fine but npm start throws an error: Module build failed: ReferenceError: [BABEL]

{   "presets": ["es2015", "react"] } 

How to merge those two files so that both running and testing would work?

Here is my package.json:

{   "name": "add-projects",   "version": "0.0.0",   "description": "Add projects",   "scripts": {     "start": "node server.js"   },   "repository": {     "type": "git",     "url": "https://github.com/rackt/redux.git"   },   "license": "MIT",   "bugs": {     "url": "https://github.com/rackt/redux/issues"   },   "homepage": "http://rackt.github.io/redux",   "dependencies": {     "immutable": "^3.7.6",     "react": "^0.14.0",     "react-dom": "^0.14.0",     "react-redux": "^4.0.0",     "redux": "^3.0.0",     "redux-thunk": "^0.1.0",     "redux-undo": "^0.5.0"   },   "devDependencies": {     "babel-core": "^5.6.18",     "babel-loader": "^5.1.4",     "babel-plugin-react-transform": "^1.1.0",     "babel-preset-es2015": "^6.3.13",     "babel-preset-react": "^6.3.13",     "babel-tape-runner": "^2.0.0",     "enzyme": "^2.0.0-rc1",     "expect": "^1.6.0",     "express": "^4.13.3",     "jsdom": "^7.2.2",     "node-libs-browser": "^0.5.2",     "react-addons-test-utils": "^0.14.6",     "react-transform-hmr": "^1.0.0",     "tape": "^4.4.0",     "tape-run": "^2.1.2",     "webpack": "^1.9.11",     "webpack-dev-middleware": "^1.2.0",     "webpack-hot-middleware": "^2.2.0"   } } 

Here is the server.js:

var webpack = require('webpack') var webpackDevMiddleware = require('webpack-dev-middleware') var webpackHotMiddleware = require('webpack-hot-middleware') var config = require('./webpack.config')  var app = new (require('express'))() var port = 3000  var compiler = webpack(config) app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath })) app.use(webpackHotMiddleware(compiler))  app.get("/", function(req, res) {   res.sendFile(__dirname + '/index.html') })  app.listen(port, function(error) {   if (error) {     console.error(error)   } else {     console.info("==> 🌎  Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)   } }) 

webpack.config.js:

var path = require('path') var webpack = require('webpack')  module.exports = {   devtool: 'cheap-module-eval-source-map',   entry: [     'webpack-hot-middleware/client',     './index'   ],   output: {     path: path.join(__dirname, 'dist'),     filename: 'bundle.js',     publicPath: '/static/'   },   plugins: [     new webpack.optimize.OccurenceOrderPlugin(),     new webpack.HotModuleReplacementPlugin(),     new webpack.NoErrorsPlugin()   ],   module: {     loaders: [{       test: /\.js$/,       loaders: ['babel'],       exclude: /node_modules/,       include: __dirname     }]   } }   // When inside Redux repo, prefer src to compiled version. // You can safely delete these lines in your project. var reduxSrc = path.join(__dirname, '..', '..', 'src') var reduxNodeModules = path.join(__dirname, '..', '..', 'node_modules') var fs = require('fs')  if (fs.existsSync(reduxSrc) && fs.existsSync(reduxNodeModules)) {   // Resolve Redux to source   module.exports.resolve = { alias: { 'redux': reduxSrc } }   // Compile Redux from source   module.exports.module.loaders.push({     test: /\.js$/,     loaders: ['babel'],     include: reduxSrc   }) } 

Answer 1

Set up different environments in your .babelrc

{   "env": {     "dev": {        "presets": ["es2015"],        "plugins":["x"]      },     "test": {       "presets": ["es2015"]     }   } } 

And then run babel after you have set your BABEL_ENV

BABEL_ENV=test <commandhere> or BABEL_ENV=dev <commandhere>

If you don't set BABEL_ENV, babel will use the NODE_ENV value. If you don't set either BABEL_ENV nor NODE_ENV, it will use 'development'.

CODE BELOW:

function getEnv(defaultValue = "development") {   return process.env.BABEL_ENV || process.env.NODE_ENV || defaultValue; }