Come configurare babel per l'esecuzione con diverse configurazioni in diversi ambienti

Question

Voglio aggiungere il test del nastro alla mia app react/redux. Non riesco a trovare un modo per far funzionare la mia app sia per i test che per l'esecuzione. Con questo .babelrc test di configurazione non corrono ma app funziona bene:

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

Con questo .babelrc test di configurazione funzionano bene, ma inizio NPM genera un errore: Modulo generazione non riuscita: ReferenceError: [BABEL]

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

Come unire questi due file in modo che funzionino sia l'esecuzione che il test?

Ecco il mio 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" 
    } 
} 

Ecco la 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

Messa in ambienti diversi in your .babelrc

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

e quindi eseguire babel dopo aver impostato il tuo BABEL_ENV

BABEL_ENV=test <commandhere> o BABEL_ENV=dev <commandhere>