Question

我正在尝试使用typescript和rollup创建一个组件库。

我有一个组件Canary。

function Canary() {
    ...
}

export default React.memo(Canary)

请注意如何将Canary包裹在HoC（React.memo）中。

我还有另一个内容，SomeComponent

function SomeComponent() {
    ...
}

export default SomeComponent

如果要仅导出SomeComponent来构建库，

src/index.ts

export { default as SomeComponent } from './SomeComponent'

该库可摇树。但是，如果我添加了包装在HoC中的组件，则无法进行树状摇动。不管我如何从库中导入SomeComponent，Canary都会与之一起被拉到书包中。

我正在使用this的变体来检测其是否可树状摇动，是否已针对汇总进行了修改。

我找到了this，它讨论了如何提示诸如webpack之类的工具。我已经使用NextJS（内部使用了webpack）设置了一个测试项目，并将sideEffects: false添加到了我图书馆的package.json上无济于事-但是，我认为这不是我的代码令人震惊，我认为这是React.memo HoC。它需要在可分发文件中标记为 pure 。

即手动编辑输出行

var index = React.memo(Canary);

export { index as Canary }

到

var index = /*#__PURE__*/memo(Canary);

并重新运行树状测试通过。

问题是什么要向汇总表示您要标记纯净的正确方法？我什至以正确的方式行事吗？

汇总+ HoCs握手

0 个答案: