Question

我正在尝试使用react＆amp;设置基本网络应用程序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文件，它抱怨：

./应用/视图/ index.js

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

./应用/视图/ wrapper.js

import React from 'react';

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

./应用/视图/ home.js

import React from 'react';

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

./应用程序/ 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

您的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 2

我认为您在./app/views/index.js中的意思是import您的Wrapper和Home次观看，而非使用export关键字

Webpack意外的令牌SyntaxError

2 个答案: