使用webpack和babel-loader进行编译时出错

Question

I cannot seem to compile using the babel 6 loader and webpack. It's driving me mad. Has anyone else come across this problem? I cannot for the life of me see where I am screwing up. :)

Console Log

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';

Answer 1

According to the error it seems that redux is complaining about the stage option. It is probably because redux is still using Babel 5. This stage option has been removed from Babel 6.

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

But you shouldn't be running through babel those files. Hence something in your webpack.config.js should be wrong. Probably because your exclude field has an extra s .

Change:

excludes: /(node_modules|bower_components)/,
       ^

With:

exclude: /(node_modules|bower_components)/,

Answer 2

Try create a .babelrc file (root) without stage property. You can create just a empty brackets if you don't need set any property.

{}

Answer 3

Try installing the preset first, since babel 6 does not transform anything by default but requires a preset to define its transformation.

npm install --save-dev babel-preset-es2015

and for react:

npm install --save-dev babel-preset-react

Now add the preset to the .babelrc file:

{
  "presets": ["es2015"]
}

This should do the trick, its exactly what I had to do to solve this.

Answer 4

忘记我在哪里看到这个（lemme知道是不是你这样我可以赞美）但是这个命令帮助我解决了很多babel引用错误。

rm $( find node_modules -name .babelrc)

Answer 5

如果从加载器中排除node_modules，那么如何处理使用es6编码的节点模块？