本文介绍了如何将Babel配置为在不同环境中以不同配置运行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我要将磁带测试添加到我的Reaction/Redux应用程序。我找不到一种方法让我的应用程序既可以测试又可以运行。这样,.babelrc配置测试不会运行,但应用程序运行正常:
{
"stage": 2,
"env": {
"development": {
"plugins": [
"react-transform"
],
"extra": {
"react-transform": {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}
}
}
}
}
使用此.babelrc配置测试可以正常工作,但NPM Start抛出错误:模块构建失败:ReferenceError:[Babel]
{
"presets": ["es2015", "react"]
}
如何合并这两个文件,以便同时运行和测试?
这是我的包。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"
}
}
这里是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
})
}
推荐答案
在您的.babelrc
{
"env": {
"dev": {
"presets": ["es2015"],
"plugins":["x"]
},
"test": {
"presets": ["es2015"]
}
}
}
,然后在设置BABEL_ENV
后运行babel
BABEL_ENV=test <commandhere>
或BABEL_ENV=dev <commandhere>
BABEL_ENV
,则Babel将使用NODE_ENV
值。如果您既不设置BABEL_ENV
也不设置NODE_ENV
,它将使用"开发"。代码如下:
function getEnv(defaultValue = "development") {
return process.env.BABEL_ENV || process.env.NODE_ENV || defaultValue;
}
这篇关于如何将Babel配置为在不同环境中以不同配置运行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!