微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用汇总创建React Tree Shakable库

如何解决使用汇总创建React Tree Shakable库

我正在尝试使用Rollup为我们的组件构建一个React库。

这些组件使用样式化组件,某些组件被摇晃,而其他组件则没有。 我已经找到了问题所在,并且不是摇树的一个组件正在调用递归函数

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',}
    ],}
];

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。