monorepo(多包)管理中, 引入的 css 文件丢失的问题 (或者说package.json中的 sideEffects 的探索)

如题:
实际的问题发现是在多包引入中导致发现css 丢失的问题, 一个简单的描述如下:

之所以用 Button 示例, 是因为有原因的, 后边贴出来的地址大家就知道了

Button.ts 中引入了 Button.css 的文件, 在使用 Button.ts 的页面中发现 引入的 css 文件内容丢失 (因为 css 文件丢失的话, 立马就看到变丑了)

//Button.ts
import Button.css
...


// Page.ts
import Button.ts
//结果样式丢失

经过不断的查找与测试, 发现这个问题有两个可能的原因:

1. 多包的处理中, 如果 公共包中 设在了 lib 模式, 比如

// vite.config.js
build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'TurboDemoShared',
      formats: ['es', 'cjs', 'umd'],
      fileName: (format) => `index.${format === 'es' ? 'esm' : format}.js`,
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },

那么会默认将所有的 css 打包进一个独立的 css 文件中, 需要后边显示的引入, 当前一些独立的 css 你可以通过 package.json 中的 exports 进行独立引入
但是如果你没有处理, 那么此次内容就编程了一个独立的 css 文件进行处理了.

2. 另外一个就是配置了 sideEffects 的包了. 这个是 tree-shaking 的时候会使用到的内容

直观的理解是我 import Button.css 都这么明显了, 你居然给我 shake 掉???

如果你不配置 sideEffects, 默认为 true, 认为都是有副作用的, 那么我不主动 tree-shake, 但是当你配置了, 可怕的事情就发生了

// package.json
..
"sideEffects": [
"**/*.css"  //css 有副作用, 不要给我 shake 掉
]
...

我不直接理解了,先贴出来 tree-shake 的官方处理与理解 with-sideeffects-false-in-packagejson

看了吧, 人家的示例中就是用的 Button, 所以呢, 这里是说, 你不配置对应的 Button.ts 的话, 那么我的 Button 就直接进行 shake 了!!!

这个逻辑感觉有点可怕, 但是可能也是为了简化处理? 我理解的是每一次进行 shake 的时候都应该进行一下判定?

到此为止

我发现官方文档的说明是对的, 这个只是在 sideEffects 在 *.css 都没有配置的情况下才有的问题, 后面给出了正确的配置

所以实际的情况下就有点迷茫了.

但是这个理解确实解决了问题, 就是将实际的对应引入的 css 的 js 文件配置在 sideEffects 上是 ok 的了. 或者说这个是一个 bug?

看也有其他的同学遇到这个问题, 现在先抛出来, 毕竟有了一个实际的解决方案; 当前

3. 在实际的页面直接引入对应的 css 或者 通过 packge.json exports 中进行引入

上边的两个也都是解决方案.

4. rollup(个人猜测)

其实是 webpack 中的 tree-shaking 文档说的非常详细, 所以引入的是 webpack 中的文档, 但是说 rollup 比较激进, 是否说明有上述的设置呢?
cursor告诉我的...

后记

其实是想分析和分享一下遇到的这个问题的, 一桶 cursor 和 豆包 给绕进去了. 片面的理解逻辑上是通的, 但是实际上确实有问题的.