Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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   }) } 
like image 477
Vaiginta Perkauskaitė Avatar asked Jan 21 '16 13:01

Vaiginta Perkauskaitė


People also ask

What is the use of Babel config?

Babel is a free and open-source JavaScript transpiler (kind of like a JavaScript compiler). It converts JavaScript code to a different JavaScript code based on how you configure it. The most famous use of Babel is converting modern JavaScript es6+ into es5, which is widely supported (even in Internet Explorer).

What is Babel environment?

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

Where is Babel config file?

babelrc file is your local configuration for your code in your project. Generally you would put it in the root of your application repo. It will affect all files that Babel processes that are in the same directory or in sibling directories of the . babelrc .


1 Answers

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; } 
like image 127
jhamm Avatar answered Sep 23 '22 17:09

jhamm