我目前正在构建一个 React 项目,并开始使用 connect 引入 Redux。我正在使用装饰器来引用 this,例如:
const mapStateToProps = (state) => {
return {
active: state.sortOrder
}
};
@connect(mapStateToProps)
export default class SortFilter extends Component {
//component code here
}
SyntaxError: /Sort.js: 意外的令牌 (10:0) @connect(mapStateToProps)
这是我的Webpack配置,我已经包含了babel-transform-decorators和stage-0预设(因为这似乎是其他人的解决方案)。
const PATH = require('path');
const webpack = require("webpack");
const ROOT = '../../../';
const APP_FOLDER = PATH.resolve(__dirname, ROOT, 'app/');
const APP_ENTRY_FILE = PATH.resolve(__dirname, ROOT, APP_FOLDER, 'client.js');
const BUILD_FOLDER = PATH.resolve(__dirname, ROOT, 'app/public/js/');
const PUBLIC_PATH = '/js/';
const BUILD_FILE = 'app.js';
const ESLINT_CONFIG_FILE = PATH.resolve(__dirname, ROOT, 'tools/build/config/eslint-config.json');
var webpackConfig = {
entry: {
app: APP_ENTRY_FILE
},
output: {
path: BUILD_FOLDER,
publicPath: PUBLIC_PATH,
filename: BUILD_FILE
},
devtool: 'inline-source-map',
debug: true,
bail: true,
eslint: {
configFile: ESLINT_CONFIG_FILE
},
module: {
preLoaders: [
{
test: /\.js$/,
include: [
APP_FOLDER
],
loader: 'eslint-loader'
}
],
loaders: [
{
test: /\.js$/,
include: [
APP_FOLDER
],
loader: 'babel',
query: {
compact: false,
cacheDirectory: true,
presets: ['es2015', 'react', 'stage-0'],
plugins: ['transform-decorators-legacy']
}
}
]
},
externals: {
'axios': 'axios',
'react': 'React',
'react-router': 'ReactRouter',
'history': 'History',
'react-dom': 'ReactDOM'
},
plugins: [
new webpack.NoErrorsPlugin()
]
};
module.exports = webpackConfig;
任何帮助解决这个问题都将不胜感激。
babel-core
? - loganfsmythbabel
版本 >= 6 ? - maxgallo