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

Question

我似乎无法使用 babel 6 loader 和 webpack 进行编译。这让我抓狂。还有其他人遇到过这个问题吗？我这辈子都看不出自己哪里搞砸了。 :)

控制台日志

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

根据错误，redux 似乎在提示 stage 选项。可能是因为 redux 仍在使用 Babel 5。这个 stage option has been removed来自巴别塔 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

但是你不应该运行 babel 这些文件。因此，您的 webpack.config.js 中的某些内容应该是错误的。可能是因为您的 exclude 字段有一个额外的 s。

更改:

excludes: /(node_modules|bower_components)/,
       ^

与:

exclude: /(node_modules|bower_components)/,