Làm thế nào để bạn cấu hình babel để chạy với các cấu hình khác nhau trong các môi trường khác nhau

Question

Tôi muốn thêm kiểm tra băng vào ứng dụng phản ứng/redux của tôi. Tôi không thể tìm được cách để ứng dụng của tôi hoạt động cả để thử nghiệm và chạy. Với .babelrc này kiểm tra cấu hình không chạy nhưng ứng dụng hoạt động tốt:

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

với .babelrc này kiểm tra cấu hình hoạt động tốt nhưng NPM bắt đầu ném một lỗi: Mô đun xây dựng thất bại: ReferenceError: [BABEL]

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

Làm cách nào để hợp nhất hai tệp đó sao cho cả chạy và thử nghiệm đều hoạt động?

Đây là package.json tôi:

{ 
    "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" 
    } 
} 

Đây là 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

Thiết lập môi trường khác nhau trong .babelrc

của bạn

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

Và sau đó chạy babel sau khi bạn đã thiết lập của bạn BABEL_ENV

BABEL_ENV=test <commandhere> hoặc BABEL_ENV=dev <commandhere>