reactjs - 如何添加样式组件作为汇总构建的外部组件？

Question

我正在尝试在我rollup.config.js的复制品中添加样式组件，但它会引发错误。我有类似的问题，react-router-dom并通过在外部重命名react-router-dom为.react-router-dom/Linkrollup.config.js

怎么办styled-components？

再生产：

// rollup.config.js
export default {
  ...
  external: ['react', 'react-router-dom/Link', 'styled-components'],
  ...
  globals: { react: 'React', 'react-router-dom/Link': 'Link', 'styled-
  components: 'styled' },
};

实际行为：使用汇总构建时引发错误

(babel plugin) An unexpected situation arose. Please raise an issue at 
https://github.com/rollup/rollup-plugin-babel/issues. Thanks!
node_modules/styled-components/dist/styled-components.es.js

版本样式组件： 2.0.1

版本汇总-插件-babel： 2.7.1

Answer 1

最后，我在 rollup.config.js 中解决了我的需求

export default {
  ...
  external: ['styled-components'],
  ...
  globals: { 'styled-components': 'styled' },
};

这取决于我们如何导入包，在我的情况下，我将它导入到我的文件中：

import styled from 'styled-components';