在 esbuild 中保留样式组件的 displayName

Question

我有一个 monorepo 设置，使用 Vite 作为构建系统。我使用 styled-components 作为样式，并希望在开发过程中为 React 组件保留

displayName

。我在 Vite 配置的

displayName

部分启用了

build

。其他 monorepo 包（列为依赖项）也使用样式组件，但 root

displayName

配置似乎被忽略。

据我从本节了解到，Vite 使用 esbuild 来预构建依赖项。因此，我的设置似乎在这一步中被忽略。生成的树如下所示（请参阅嵌套节点中的缩小 CSS 名称）：

如果我理解正确的话，我必须通过Vite的

optimizeDeps.esbuildOptions

调整esbuild设置，但我目前无法找到一种方法来为样式组件做到这一点。

Answer 1

经过长时间的战斗我解决了这个问题！希望这有帮助。我正在使用 Vite、React.js 和 styled-components。没有 SSR 或任何花哨的东西。

解决方案是回退包版本。旧版本的代码应该适合您的设置。然后只需从新包的子文件夹中导入，然后放入 babel 插件即可。

1. 您需要从node_modules中删除样式组件存储库。

2. 然后进入package.json并更改样式组件版本号。对我来说，最终有效的版本是

   5.3.0

   。您需要该版本有一个名为 Macro 的文件夹。

3. 然后运行

   npm i

   安装新版本的样式组件。

4. 现在从每个组件中导入，而不是像这样导入 -> import styled from 'styled-components'

   ; you need to do this -> 

   import styled from 'styled-components/macro';`。你正在告诉文件它需要 loa

5. 无需确保您的 vite.config.js 文件中有正确的加载程序。它被称为

   'vite-plugin-babel-macros'

   。我的配置看起来像这样。

import { defineConfig } from 'vite';

import react from '@vitejs/plugin-react-swc';

import macrosPlugin from "vite-plugin-babel-macros";

export default defineConfig({
    define: {
        'process.env': {},
    },
    plugins: [
        macrosPlugin(),
      react()
    ]
  })

6. 最后你需要运行

   npm i vite-plugin-babel-macros'

   ，以便你的node_modules中有插件的代码。

7. 重新启动 Vite，一切都应该加载！

（所有功劳都归功于此链接，它帮助我完成了 90% 的任务。）