我正在尝试将redux集成到现有的react应用程序中。我所有的react代码都在jsx文件中。现在,我将介绍redux和store.js。在编译过程中,store.js上一个预期的令牌错误上的webpack错误
网络包.配置. js
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'project/static/public/js');
var APP_DIR = path.resolve(__dirname, 'project/static/public/js/components');
module.exports = {
entry: APP_DIR + '/App.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
resolve: {
alias: {
'react': path.join(__dirname, 'node_modules', 'react')
}
},
module : {
loaders : [
{
test : /\.jsx/,
include : APP_DIR,
loader : 'babel',
presets : ['es2015']
},
{
test : /\.js/,
include : BUILD_DIR,
exclude : /bundle.js||bundle.js.map||node_modules/,
loader : 'babel',
presets : ['es2015']
}
]
},
watchOptions: {
poll: true
}
};
.babelrc
{
"presets": [
"es2015",
"react"
],
"env": {
"start": {
"presets": [
"react-hmre"
]
}
},
"plugins": [
["transform-es2015-arrow-functions", { "spec": true }],
["transform-class-properties"]
]
}
商店. js
import { applyMiddleware, createStore} from 'redux';
import combineReducers from './reducers/index.js'
export default createStore(combineReducers)
出错信息
./project/static/public/js/store中的错误.js模块解析失败:/home/username/git/project/project/static/public/js/store.js第 1 行:
意外令牌您可能需要一个适当的加载程序来处理此文件类型。|从'redux'导入{ApplyMiddleware, createStore};|从'./减速机/index.js导入组合减速机' | @ ./项目/静态/公共/js/组件/应用程序.jsx 15:13-32
这些文件在尝试解析和更好地理解 redux 时经历了多次迭代。我认为问题出在我的网络包配置上。
您使用的是哪个版本的Babel?我猜您需要在webpack规则中使用babel-loader。此配置适用于Babel 7和Webpack 4。
网络包规则:
{
test: /\.js$/,
include : BUILD_DIR,
exclude : /bundle.js||bundle.js.map||node_modules/,
use: {
loader: 'babel-loader',
},
},