Webpack意外的令牌语法错误
问题描述:
我试图设置一个基本的Web应用程序使用react
& redux
以及webpack
。目前的情况是我刚刚放在一起的基本框架,但运行构建似乎总是导致以下错误: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()
]
};
我完全的错误难倒。如果有人对我出错的地方有任何想法,请告诉我。谢谢!
答
没有你的JS文件都在做出口(默认或其它):
执行以下操作:
在./app/views/wrapper.js:
export default Wrapper;
In ./app/views/home.js:
export default Home;
虽然我并不需要这个包装文件(尽管我明白你在这里想达到什么目的!),但仍然如你所愿。
然后替换./app/views/index。JS为:
import Wrapper from './wrapper';
import Home from './home';
export Wrapper;
export Home;
答
我想你的意思,在./app/views/index.js做的是import
你Wrapper
和Home
的意见,而不是使用export
关键字。
答
我看到一个小错误,可能会造成一个问题:你的 方法React.render(
里面应用程序/ index.js可能会更改为ReactDOM.render(
我刚才说这个作为评论,但我目前没有评论的声望。无论如何,希望它有帮助:-)