试图将 redux 集成到 react 应用程序中。 Webpack 在 store.js 上令人窒息

Posted 2023-02-19

【中文标题】试图将 redux 集成到 react 应用程序中。 Webpack 在 store.js 上令人窒息

【英文标题】：Trying to integrate redux into react application. Webpack is choking on store.js

【发布时间】：2017-03-06 14:15:20

【问题描述】：

我正在尝试将 redux 集成到现有的 react 应用程序中。我所有的反应代码都在 jsx 文件中。现在我要介绍 redux 和 store.js。在 store.js 上的预期令牌错误上编译 webpack 错误

webpack.config.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"]
    ]

store.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； |从 './reducers/index.js' 导入 combineReducers | @ ./project/static/public/js/components/App.jsx 15:13-32

这些文件经历了多次迭代，试图解决和更好地理解 redux。我认为问题出在我的 webpack 配置上。

【问题讨论】：

对于.js 文件，您只包括BUILD_DIR。 store.js 在哪里？我猜它在APP_DIR 下，因为它没有包含在babel-loader 的配置中，所以Webpack 不知道要使用什么加载器。

store.js 位于BUILD_DIR 的根目录中。 project/static/public/js/store.js

【参考方案1】：

你使用的是哪个版本的 Babel？我猜你需要在 webpack 规则中使用 babel-loader。此配置适用于 Babel 7 和 Webpack 4。

WEBPACK 规则：

      
        test: /\.js$/,
        include : BUILD_DIR,
        exclude : /bundle.js||bundle.js.map||node_modules/,
        use: 
          loader: 'babel-loader',
        ,
      ,

和.babelrc文件示例：

  "presets": [[
    "@babel/preset-env", 
      "useBuiltIns": "entry"
    ],
    "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-export-default-from",
    "react-hot-loader/babel"
  ]

请记住，您需要安装至少版本 8.0.0、babel core 7.0.0 和 webpack 4.23 的 babel-loader。

但是，我很确定问题是您需要在 webpack 中使用 babel-loader 插件。访问https://github.com/babel/babel-loader

最好的！