javascript - 在汇总配置中，如何使用 moduleSideEffects 导入副作用文件及其依赖项？

Question

我的 bundle 中包含许多我不想要的东西，因为当它们不是时，它们被认为是有副作用的。无极电话之类的。因此，我正在尝试将 moduleSideEffects 设置为一个函数*，该函数*仅将那些真正具有副作用的文件标记为副作用。但是，我遇到了一个问题:如果所有依赖项都没有副作用，Rollup 将不会包含标记为副作用的文件。

// a.js
export function se() {
   console.log('Side effect');
}

// b.js
import { se } from 'b.js';
se();

我将 b.js 标记为副作用，因为我只希望在包含 b.js 的地方包含 a.js。现在考虑这两个可能的 main.js 文件:

// main.js
import 'a.js';

此处 a.js 没有包含在包中，这是正确的，因为它没有副作用。

// main.js
import 'b.js';

这里既不包含 a.js 也不包含 b.js，尽管 b.js 有副作用。当我将 a.js 标记为副作用时，它们都包含在内，但这意味着它也包含在以前版本的 main.js 中。

我无法确定这是错误还是预期行为，或者如何解决它。

汇总 2.21.0

(* 我使用了一个函数，因为我无法获得一个相对、绝对或 blob 路径的数组来作为 moduleSideEffects 工作，这是一个单独的问题。我显然遗漏了一些关于它们如何工作的信息应该定义。)

Answer 1

如此处所述:https://rollupjs.org/guide/en/#treeshake

要指定哪些模块有副作用，您可以执行以下操作:

{
...
  treeshake: {
    moduleSideEffects: ['@saleshood/design-system/dist/style.css'],
  },
}

注意:字符串参数指的是有副作用的模块，而不是它的消费者。例如，要使此文件继续加载 css 文件:

// src/hocs/DSHOC.tsx
import React from 'react';
import { ConfigProvider } from 'antd';

import '@saleshood/design-system/dist/style.css';

export const DSHOC = {...}

使用

moduleSideEffects: ['@saleshood/design-system/dist/style.css'],

不是

moduleSideEffects: ['src/hocs/DSHOC.tsx'],