Question

我正在使用React UI模块，该模块使用样式化组件，用于已经有另一个使用样式化组件的模块的页面的一部分。因为该页面上存在这个预先存在的样式化组件实例，它与我的代码冲突，并且不显示使用此lib应用的任何css。

有一个常见问题解答，它提供了一个解决方案，但通过尝试它我得到一些与webpack相关的其他问题如下。

这是我提到的FAQ link。

我相应地更改了我的配置：

entry: {vendor: ['styled-components'], app: './src/index.js'},
externals: {
  'styled-components': {
    commonjs: 'styled-components',
    commonjs2: 'styled-components',
    amd: 'styled-components',
    root: 'styled'
  }
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: "vendor",
    minChunks: Infinity,
  })
]

此外，filename配置中的output更改为： filename: '[name].js'

我的网络包版本为3.10.0。

此配置导致错误webpackjsonp is not defined。

根据常见问题解答，解决原始问题的方法是正确的，适用于我的情况，但我可能会在配置中遗漏一些内容。请帮忙！

Answer 1

我可以使用此配置

externals: {
    'styled-components': 'styled-components'
},

但是在主应用程序中，我不得不将样式组件作为全局变量，并手动向其中添加一些样式组件功能以使其正常工作。

import styled, { 
   keyframes, css, createGlobalStyle, ThemeProvider 
} from 'styled-components';

window['styled-components'] = styled;
window['styled-components'].keyframes = keyframes;
window['styled-components'].css = css;
window['styled-components'].createGlobalStyle = createGlobalStyle;
window['styled-components'].ThemeProvider = ThemeProvider;

Answer 2

因此，我正在尝试找到此问题的解决方案。我还没有，但是OP的方法行不通（并且对我也不行，这就是原因。

首先，该配置中的externals选项将跳过捆绑样式化组件，但是，然后它将尝试从选项中列出的源中查找依赖项。我尚未以这种方式成功找到该库，因此此选项不起作用。

其次，CommonsChunkPlugin将app.js（或任何称为主文件的文件）包装在webpackJsonp（）函数中，该函数旨在利用来自供应商文件的依赖项正确加载内容。因此，供应商文件必须在您的app.js文件之前加载，因为它设置了webpackJson（）函数。

这是一个令人沮丧的话题。我正在尝试使用微前端来构建UI，其中一些使用样式化的组件，并且仅允许单个库的限制使我发疯。这是一个可怕的设计决定，我无非是鄙视图书馆创建者将其强加于我们。

Answer 3

我已经发布了一个解决方案作为对我的问题的评论，但我想有时其他人不容易注意到这一点。因此，在这里粘贴我的评论作为答案。

出于这个原因，我放弃了这个库，转而使用 react-emotion。它就像一个魅力，只需对 css 进行微小的代码更改。

如果在同一页面中已存在另一个样式化组件实例，如何更改样式化组件的webpack配置？

3 个答案: