Reactjs 使用webpack和babel loader编译时出错
我似乎无法使用babel 6加载程序和网页包进行编译。它快把我逼疯了。还有其他人遇到过这个问题吗?我一辈子都看不出我把事情搞砸了 控制台日志Reactjs 使用webpack和babel loader编译时出错,reactjs,webpack,babeljs,Reactjs,Webpack,Babeljs,我似乎无法使用babel 6加载程序和网页包进行编译。它快把我逼疯了。还有其他人遇到过这个问题吗?我一辈子都看不出我把事情搞砸了 控制台日志 ERROR in ./~/redux/lib/index.js Module build failed: ReferenceError: [BABEL] /Users/montague/Sites/redux/routing/node_modules/redux/lib/index.js: Unknown option: /Users/montague/S
ERROR in ./~/redux/lib/index.js
Module build failed: ReferenceError: [BABEL] /Users/montague/Sites/redux/routing/node_modules/redux/lib/index.js: Unknown option: /Users/montague/Sites/redux/routing/node_modules/redux/.babelrc.stage
at Logger.error (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/logger.js:43:11)
at OptionManager.mergeOptions (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:245:18)
at OptionManager.addConfig (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:206:10)
at OptionManager.findConfigs (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:347:16)
at OptionManager.init (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:392:12)
at File.initOptions (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/index.js:191:75)
at new File (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/index.js:122:22)
at Pipeline.transform (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
at transpile (/Users/montague/Sites/redux/routing/node_modules/babel-loader/index.js:14:22)
at Object.module.exports (/Users/montague/Sites/redux/routing/node_modules/babel-loader/index.js:83:14)
@ ./src/js/main.js 11:13-29
ERROR in ./~/react-redux/lib/index.js
Module build failed: ReferenceError: [BABEL] /Users/montague/Sites/redux/routing/node_modules/react-redux/lib/index.js: Unknown option: /Users/montague/Sites/redux/routing/node_modules/react-redux/.babelrc.stage
at Logger.error (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/logger.js:43:11)
at OptionManager.mergeOptions (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:245:18)
at OptionManager.addConfig (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:206:10)
at OptionManager.findConfigs (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:347:16)
at OptionManager.init (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:392:12)
at File.initOptions (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/index.js:191:75)
at new File (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/index.js:122:22)
at Pipeline.transform (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
at transpile (/Users/montague/Sites/redux/routing/node_modules/babel-loader/index.js:14:22)
at Object.module.exports (/Users/montague/Sites/redux/routing/node_modules/babel-loader/index.js:83:14)
@ ./src/js/main.js 17:18-40
ERROR in ./~/redux-router/lib/index.js
Module build failed: ReferenceError: [BABEL] /Users/montague/Sites/redux/routing/node_modules/redux-router/lib/index.js: Unknown option: /Users/montague/Sites/redux/routing/node_modules/redux-router/.babelrc.stage
at Logger.error (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/logger.js:43:11)
at OptionManager.mergeOptions (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:245:18)
at OptionManager.addConfig (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:206:10)
at OptionManager.findConfigs (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:347:16)
at OptionManager.init (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/options/option-manager.js:392:12)
at File.initOptions (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/index.js:191:75)
at new File (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/file/index.js:122:22)
at Pipeline.transform (/Users/montague/Sites/redux/routing/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
at transpile (/Users/montague/Sites/redux/routing/node_modules/babel-loader/index.js:14:22)
at Object.module.exports (/Users/montague/Sites/redux/routing/node_modules/babel-loader/index.js:83:14)
@ ./src/js/main.js 13:19-42
webpack.config.js
var path = require('path');
module.exports = {
entry: path.resolve(__dirname + "/src/js/main.js"),
output: {
path: path.resolve(__dirname + "/dist/js/bundle.js")
},
module: {
loaders: [
{
test: /\.jsx?/,
excludes: /(node_modules|bower_components)/,
loader: "babel",
query: {
presets:['es2015']
}
}
]
}
}
main.js
import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';
import {createStore, compose, combineReducers} from 'redux';
import {
ReduxRouter,
routerStateReducer,
reduxReactRouter,
pushState
} from 'redux-router';
import {Route, Link} from 'react-router';
import {Provider, connect} from 'react-redux';
import {createHistory} from 'history';
根据错误,似乎
redux
正在抱怨stage
选项。这可能是因为redux
仍在使用Babel5。这是巴别塔6号的
模块生成失败:引用错误:[BABEL]
/Users/montague/Sites/redux/routing/node_modules/redux/lib/index.js:
未知选项:
/Users/montague/Sites/redux/routing/node_modules/redux/.babelrc.stage
但你不应该浏览那些文件。因此,webpack.config.js
中的某些内容应该是错误的。可能是因为exclude
字段有一个额外的s
更改:
excludes: /(node_modules|bower_components)/,
^
与:
尝试创建一个不带stage属性的.babelrc文件(根)。如果不需要设置任何属性,可以只创建一个空括号
{}
首先尝试安装预设,因为默认情况下,babel6不会转换任何内容,但需要预设来定义其转换
npm install --save-dev babel-preset-es2015
对于react:
npm install --save-dev babel-preset-react
现在将预设添加到.babelrc
文件:
{
"presets": ["es2015"]
}
这应该可以解决问题,这正是我要解决这个问题所必须做的。忘记我在哪里看到的(让我知道是不是你,这样我就可以相信),但是这个命令帮助我修复了大量的巴别塔参考错误
rm$(查找节点模块-name.babelrc)
如果从加载程序中排除节点模块,那么您将如何处理使用es6编码的节点模块
{
"presets": ["es2015"]
}