如何向另一个具有样式组件依赖关系的库提供依赖于样式组件的React组件库？

Question

最近，我将一个内部组件库转换为样式化的组件。该组件库将组件样式设置为peerDep和package.json中的devDep。从这里开始，我将样式化的组件导入到每个需要样式的组件中。到那时为止，一切都很好。

我有一个(CRA)应用程序，它还将样式为Comopnents作为常规依赖项导入。我需要它能够为这个特定的项目构建一次性组件。但我也需要能够导入我的组件库，为这个基于CRA的新应用构建核心组件。

这就是我的问题:我正在这个CRA应用程序中测试我最近转换的基于组件的组件库，方法是直接链接到package.json (file:../component-lib)中的组件库。我已经安装了我的所有deps，从组件库导入组件，在CRA项目中构建了一个新的特定于项目的样式组件，并在本地运行它只看到同样的错误：“看起来在这个应用程序中初始化了几个‘样式-组件’的实例。这可能会导致动态样式不正确呈现，在再水化过程中会发生错误，并使您的应用程序在没有充分理由的情况下变得更大。”我已经阅读了文档的这一部分，并学会了在组件库中不使用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 )中，样式组件包仍然被拖了两次，样式设计也不能正常工作。这似乎是一个潜在的webpack问题，因为开发模式和生产模式的行为方式非常不同，但这可能是与CRA webpack dev配置或(更可能的)某些方面，我还不明白。

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

下面是我的测试组件库(component-lib3的package.json，仅仅因为尝试了其他几种方法)：

{
  "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"]
}

我尝试了许多变体，但我不明白为什么在dev模式下这种方法不能正常工作。

Answer 2

我现在正面临着同样的问题，我仍然不确定。我可以很好地解决这个问题，所以请不要把这个答案当作一个有保证的解决方案。有两件事你可以试试。

第一个是出现在样式-组件常见问题部分中的内容。他们建议用别名配置Webpack (我假设你也在使用Webpack )，这样它就可以在指定的任何地方寻找样式组件依赖项。这应该避免有几个样式组件的实例，但到目前为止，我无法使这个工作为我自己。

第二个选择是使用替代的no npm link。显然，当您有一个符号链接依赖时(这就是npm link实际上所做的)。邦德勒的解析器试图在同一个项目中查找依赖项。在链接样式组件常见问题一节中也提到了这一点。如果遵循这种方法，应该避免创建指向CRA应用程序的组件库的符号链接，而是复制文件夹。

有一个名为wml的工具可以将组件库的内容复制到您的CRA应用程序的node_modules文件夹中。wml还可以监视组件库文件夹中的更改，并将更改复制到CRA应用程序的node_modules中。因此，我们可以说wml是npm link的一种替代。在我最初的尝试中，它对我很好，所以也许这是你可以尝试的东西。

要小心，：wml中有问题，在第一次设置项目时，它会导致删除项目上的文件。这件事没有发生在我身上，但我看到其他人也在遭受这个问题，所以如果你要尝试wml，请确保所有的更改都被推送到源代码版本控制系统中。

以下是使用命令行为项目设置wml所需的步骤：

wml add <component-library-folder> <CRA-app-folder>/node_modules/<name-of-component-library>
wml start

理想情况下，我更愿意解决这个问题，而不必使用任何外部工具，但是如果样式组件维护人员在他们的站点上提出的建议是无效的，那么它可以作为一个解决办法。