如何将依赖于样式化组件的React组件库提供给另一个也具有样式化组件依赖项的库？

Question

我最近将正在处理的内部组件库转换为样式化组件。该组件库在package.json中将Styled Components列出为peerDep和devDep。从那里，我将样式化组件导入到需要样式化的每个组件中。到那时为止，所有工作都很好。

我有一个Create React App（CRA）应用程序，该应用程序也将样式化的组件导入为常规依赖项。我需要它能够为该特定项目构建一次性组件。但是，我还需要能够导入我的组件库，以为此新的基于CRA的应用程序构建核心组件。

现在这是我的问题：我正在通过直接链接到package.json（file:../component-lib）中的组件库，在此CRA应用程序中测试我最近转换的基于样式组件的组件库。我已经安装了所有部门，从组件库中导入了组件，并在CRA项目中构建了一个新的项目特定的样式化组件，然后在本地运行它，只是看到了相同的错误：“看来，有多个'styled-组件在此应用程序中初始化。这可能会导致动态样式无法正确呈现，在补液过程中会发生错误，并使您的应用程序变大而没有充分的理由。” 我已经阅读了文档的这一部分，并学会了不使用npm链接并将SC用作我的组件库中的peerDep和devDep。

我相信这个问题不允许我访问组件库中传递给自定义ThemeProvider的主题道具，因为我正在CRA项目中运行多个实例？

这个问题肯定是由于我缺乏依赖管理知识。我只是想知道是否还有其他人遇到过类似的问题，或者我应该怎么做才能避免样式化合作伙伴重复出现？

组件库索引

export { default as Button } from "./components/Button";

export {
  default as CustomThemeProvider
} from "./components/utils/CustomThemeProvider";

组件库package.json

"scripts": {
    "build": "nwb build-react-component --copy-files",
    "clean": "nwb clean-module && npm clean-demo",
    "start": "nwb serve-react-demo",
    "lint": "eslint src/**",
    "test": "nwb test-react",
    "styleguide": "styleguidist server",
    "styleguide:build": "styleguidist build",
    "test:coverage": "nwb test-react --coverage",
    "test:watch": "nwb test-react --server",
    "publish": "npm run build && npm publish"
},
"dependencies": {
    "@rebass/grid": "^6.0.0-4",
    "prop-types": "^15.6.0",
    "react-portal": "^4.1.2"
},
"peerDependencies": {
    "react": "16.x",
    "styled-components": "^4.0.3"
},
"devDependencies": {
    "babel-eslint": "^8.2.2",
    "eslint": "^4.18.2",
    "eslint-plugin-react": "^7.7.0"
    "prettier": "1.14.3",
    "nwb": "0.22.x",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-styleguidist": "^7.2.0",
    "styled-components": "^4.0.3"
},

组件库NWB配置

module.exports = {
  type: "react-component",
  npm: {
    esModules: false,
    umd: false,
  },
  babel: {
    stage: 1
  }
};

CRA项目package.json

"dependencies": {
  "component-library": "0.16.6",
  "react": "^16.6.0",
  "react-dom": "^16.6.0",
  "react-scripts": "2.1.0",
  "styled-components": "^4.0.3"
},

Answer 1

这只是部分答案，我希望您或其他人能够弄清楚其余部分。我远不是管理此类依赖关系的专家，并且正在帮助扩展我自己的知识，因为我可能想尽快进行类似的设置。

虽然看起来这应该可以通过 nwb 实现，但我转而直接使用 webpack 以获得更多控制权。即使直接使用 webpack 我也只是完成了其中的一部分。当我进行构建时，一切正常，但在 CRA 应用程序的开发模式（npm start）下，样式组件包仍然被拉入两次，并且样式无法正常工作。这似乎是一个潜在的 webpack 问题，因为开发模式和生产模式的行为如此不同，但它可能与 CRA webpack 开发配置有关，或者（更有可能）是我还不了解的某些方面。

这是组件库配置参考的一个很好的示例：https ://github.com/kalcifer/webpack-library-example

这是我的测试组件库的 package.json （组件库3只是因为尝试了其他几种方法）：

{
  "name": "component-lib3",
  "version": "1.0.7",
  "description": "component-lib3 React component",
  "main": "dist/component-lib3.js",
  "peerDependencies": {
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "styled-components": "^4.0.3"
  },
  "devDependencies": {
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "styled-components": "^4.0.3",
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "webpack": "^4.24.0",
    "webpack-cli": "^3.1.2"
  },
  "scripts": {
    "build": "webpack"
  }
}

这是 webpack.config.js：

var path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'production',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'component-lib3.js',
    libraryTarget: 'umd',
    library: 'component-lib3'
  },
  externals: {
     "styled-components": {
       commonjs: 'styled-components',
       commonjs2: 'styled-components',
       amd: 'styled-components'
     },
     "react": {
       commonjs: 'react',
       commonjs2: 'react',
       amd: 'react'
     },
     "react-dom": {
       commonjs: 'react-dom',
       commonjs2: 'react-dom',
       amd: 'react-dom'
     }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

然后还有 .babelrc：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

我尝试了多种变体，但我不明白为什么这不适用于开发模式。