Блог

Я пытаюсь создать библиотеку React для наших компонентов с помощью Rollup.

В компонентах используются стилизованные компоненты, и некоторые компоненты встряхиваются деревом, а другие — нет. Я отследил проблему, и один компонент, который не является встряхиванием дерева, вызывает рекурсивную функцию:

 const recursiveCloneChildren = (children, textColor) => React.Children.map(children, (child) => {
  if (!React.isValidElement(child)) return child;
  const childProps = { color: textColor };
  childProps.children = recursiveCloneChildren(child.props.children, textColor);
  return React.cloneElement(child, childProps);
});
  

rollup.config.js

 const commonPlugins = [
  babel({
    babelHelpers: 'bundled',
    exclude: ['node_modules/**', '../../node_modules/**']
  }),
  resolve({
    extensions: ['.js', '.jsx'],
  }),
  commonjs(),
  image()
];

const configBase = {
  input: './src/index.js',
  external: ['react', 'react-dom', 'styled-components', 'prop-types'],
  plugins: commonPlugins,
};

export default [
  {
    ...configBase,
    output: [
      {
        file: pkg.module,
        format: 'esm',        
      },
      {
        file: pkg.main,
        format: 'cjs',            
      }
    ],
  }
];