Comment ajouter des composants de style en tant qu'extérieurs pour la construction de rollup?

Question

J'essaie d'ajouter des composants de style dans mon rollup.config.js comme la reproduction ci-dessous, mais il y a une erreur. J'ai eu le même problème pour react-router-dom et l'ai résolu en renommant react-router-dom en react-router-dom/Link dans les externals de rollup.config.js.

Comment faire avec styled-components?

Reproduction:

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

Comportement réel: une erreur quand construire avec Rollup

(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 

Version composants: style 2.0.1

Version Rollup -PL ugin-babel: 2.7.1

Answer 1

Enfin, je résoudre mon besoin de cela dans mes rollup.config.js

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

Il est dépend de la façon dont nous importons le paquet, dans mon cas je l'importer dans mon fichiers comme:

import styled from 'styled-components';