Webpack 意外的令牌语法错误

Question

我正在尝试使用 react 和 redux 以及 webpack 来设置一个基本的网络应用程序。就目前而言，我只是将基本框架放在一起，但是运行构建似乎总是导致以下错误：

ERROR in ./app/views/index.js
Module build failed: SyntaxError: /Users/username/Dropbox/Web Development/my-website/app/views/index.js: Unexpected token (1:7)
export Wrapper from './wrapper';
export Home from './home';
export Apps from './apps';
    at Parser.pp.raise (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:1378:13)
    at Parser.pp.unexpected (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:2817:8)
    at Parser.pp.expect (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:2811:33)
    at Parser.pp.parseExportSpecifiers (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:2637:8)
    at Parser.pp.parseExport (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:2570:28)
    at Parser.parseExport (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:3569:20)
    at Parser.pp.parseStatement (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:1852:90)
    at Parser.parseStatement (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:3507:22)
    at Parser.pp.parseBlockBody (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:2208:21)
    at Parser.pp.parseTopLevel (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:1747:8)
    at Parser.parse (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:1349:17)
    at Object.parse (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/node_modules/babylon/index.js:45:50)
    at File.parse (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/lib/transformation/file/index.js:479:24)
    at File.parseCode (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/lib/transformation/file/index.js:568:20)
    at /Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/lib/transformation/pipeline.js:48:12
    at File.wrap (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/lib/transformation/file/index.js:528:16)
    at Pipeline.transform (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-core/lib/transformation/pipeline.js:46:17)
    at transpile (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-loader/index.js:14:22)
    at Object.module.exports (/Users/username/Dropbox/Web Development/my-website/node_modules/babel-loader/index.js:88:12)
 @ ./app/index.js 23:13-31

据我所知，javascript 文件中的所有内容似乎都是正确且有效的，这就是它所抱怨的：

./app/views/index.js

export Wrapper from './wrapper';
export Home from './home';

./app/views/wrapper.js

import React from 'react';

class Wrapper extends React.Component {
    render () {
        return(
            <div>
                <h3>Wrapper</h3>
            </div>
        );
    }
}

./app/views/home.js

import React from 'react';

class Home extends React.Component {
    render () {
        return(
            <div>
                <h3>Home</h3>
            </div>
        );
    }
}

./app/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';

import reducer from './reducers';
import { Wrapper, Home } from './views';

const store = createStore(reducer);
const history = syncHistoryWithStore(browserHistory, store)

React.render(
    <Provider store={store}>
        <div>
            <Router history={history}>
                <Route path="/" component={Wrapper}>
                    <IndexRoute component={Home}/>
                </Route>
            </Router>
        </div>
    </Provider>,
    document.getElementById('mount')
);

在配置方面我有以下几点：

package.json

{
  // ...

  "dependencies": {
    "react": "^0.14.8",
    "react-dom": "^0.14.8",
    "react-redux": "^4.4.1",
    "react-router": "^2.0.1",
    "react-router-redux": "^4.0.1",
    "redux": "^3.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: [
    'webpack/hot/only-dev-server',
        path.resolve(__dirname, 'app/index.js')
    ],
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel", query: {presets:['react','es2015']}}
        ]
    },
    plugins: [
        new webpack.NoErrorsPlugin()
    ]
};

我完全被这个错误搞糊涂了。如果有人对我出错的地方有任何想法，请告诉我。谢谢！

Answer 1

我认为您在 ./app/views/index.js 中的意思是 import 您的 Wrapper 和 Home 视图，而不是使用 export关键字。

Answer 2

None 个 JS 文件正在导出（默认或其他）：

执行以下操作：

在./app/views/wrapper.js:

export default Wrapper;

在./app/views/home.js:

export default Home;

虽然你并不真的需要那个包装文件（虽然我理解你在这里想要实现的目标！），但仍然如你所愿。

然后将./app/views/index.js替换为：

import Wrapper from './wrapper';
import Home from './home';
export Wrapper;
export Home;

Answer 3

我看到一个可能导致问题的小错误： app/index.js 中的 React.render( 方法可能会更改为 ReactDOM.render(

我本来可以将其添加为评论，但我目前没有发表评论的资格。无论如何希望它有帮助:-)

Webpack 意外的令牌语法错误

Webpack Unexpected token SyntaxError

reactjs

webpack

webpack-dev-server

redux

react-redux