首页 > 解决方案 > 为 react redux 构建 npm 包时出错

问题描述

我正在创建一个 HOC 来连接容器和代表性组件。

我正在使用 webpack 构建开发测试和生产。

该包导出一个返回 react-redux 连接组件的函数

在开发中,一切都按预期工作。当我构建包并链接到生产构建中的测试时,我得到了

在“Connect(NameComponentPres)”的上下文中找不到“store”。要么将根组件包装在 a 中<Provider>,要么将自定义的 React 上下文提供者传递给<Provider>连接选项中的 Connect(NameComponentPres),并将相应的 React 上下文消费者传递给 Connect(NameComponentPres)。

我不认为这是反应的问题,因为它适用于开发。

这是我的配置

webpack.config.js

const path = require("path");


const outputPath = process.env.BUILD
   ? path.resolve("./build")
   : path.resolve("./test");

const testConfig = {
   mode: "development",
   entry: "./demo/index.js",
   devtool: "inline-source-map",
   externals: "./build/redux-simple-container.js",
   output: {
       path: outputPath,
       filename: "index.js"
  },
  module: {
    rules: [
        {
            loader: "babel-loader",
            include: [path.resolve("./demo")]
        }
    ]
  }
};

const buildConfig = {
  entry: "./src/ReduxSimpleContainer.js",
  mode: "production",
  output: {
      path: outputPath,
      filename: "redux-simple-container.js",
      libraryTarget: "commonjs2"
  },
  externals: ["react", "react-dom"],
  module: {
      rules: [
        {
            test: /\.js?$/,
            use: "babel-loader",
            exclude: /(node_modules)/
        }
    ]
  }
};

module.exports = process.env.BUILD ? buildConfig : testConfig;

.babelrc

{
  "presets": [["airbnb", { "modules": false }]],
  "plugins": ["transform-object-assign"]
}

./src/ReduxSimpleContainer.js

import { connect } from "react-redux";
const ReduxSimpleContainer = (actions, stateRequested, Component) => {
  ....
  ....
  return connect(
    mapStateToProps,
    mapDispatchToProps
  )(Component);
};

export default ReduxSimpleContainer;

标签: reactjsnpmwebpackredux

解决方案


推荐阅读