如何将React.js+Redux应用封装为可复用npm组件并解决引用异常

你在本地调试时组件被Provider和ThemeProvider包裹可正常访问上下文，但发布npm包时导出逻辑错误，导致父项目引入的MyComponent没有被对应的上下文提供者包裹，因此无法读取store和主题配置。

1. 修改组件入口代码 #

将原App.js调整为npm包导出入口，封装上下文提供者同时支持自定义配置，修改后代码如下：

import React from 'react';
import MyComponent from './MyComponent';
import { Provider } from 'react-redux';
import defaultStore from './MyComponent/store';
import { ThemeProvider } from 'styled-components';
// 替换为你实际的默认主题配置
import defaultTheme from './your/default/theme/path';

// 导出的组件支持接收自定义store、自定义主题，同时透传所有props给内部组件
function PublishComponent({
  store = defaultStore,
  theme = defaultTheme,
  ...restProps
}) {    
  return (
    <Provider store={store}>
        <ThemeProvider theme={theme}>
          <MyComponent {...restProps}/>
        </ThemeProvider>
    </Provider>
  );
}

export default PublishComponent;

// 可选：导出裸组件和基础配置，满足用户自定义上下文的高级需求
export { 
  MyComponent,
  defaultStore as componentStore,
  defaultTheme as componentDefaultTheme
};

2. 调整package.json配置 #

• 将main字段指向上面修改后的入口文件路径
• 把react、react-redux、styled-components这类公共依赖放到peerDependencies中，避免和父项目的依赖版本冲突

{
  "main": "path/to/your/entry/file.js",
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-redux": "^8.0.0",
    "styled-components": "^5.0.0 || ^6.0.0"
  }
}

3. 调整打包配置 #

使用库模式打包你的组件，不要使用普通React应用的打包规则，推荐用rollup、tsup等专门打组件库的工具，避免把公共依赖打包进你的npm包，同时保证组件可以被正常导入。

修复后重新发布版本，父项目安装后即可正常使用。

内容的提问来源于stack exchange，提问作者John Glabb