How do you configure babel to run with different c

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("==>                 

            

标签： testing reactjs webpack babeljs

举报

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 both not, will use 'development'.

CODE BELOW:

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