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

Question

我似乎无法使用babel 6加载器和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';

- Monty Monro

Answer 1

根据错误提示，似乎是redux对stage选项抱怨。这可能是因为redux仍在使用Babel 5。Babel 6已经移除了此选项。

模块构建失败：ReferenceError：[BABEL] /Users/montague/Sites/redux/routing/node_modules/redux/lib/index.js：未知选项：/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)/,

- dreyescat

Answer 2

尝试创建一个名为.babelrc的文件（在根目录下），不要加入stage属性。如果您不需要设置任何属性，可以只创建一个空括号。

{}

- Klayton Faria

Answer 3

首先尝试安装预设，因为babel 6默认不进行任何转换，但需要一个预设来定义其转换。

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

并且对于React：

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

现在将预设添加到 .babelrc 文件中：

{
  "presets": ["es2015"]
}

这应该可以解决问题，这正是我必须做的来解决这个问题。

- kunl

Answer 4

我忘记在哪里看到这个命令了（如果是你，请告诉我，以便我可以给予功劳），但这个命令帮助我解决了许多 Babel 引用错误。

rm $( find node_modules -name .babelrc)

- Joe Susnick

Answer 5

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

- Christopher Thomas