README-ZH.md

use-client

英文

一个将React组件库自动转换为“React客户端组件“的 swc 插件，比如：你可以通过它自动将@mui中的组件自动转换为"React客户端组件"，而不用在外部包装一个使用了"use client"的组件。

安装

npm:

npm install -D use-client

yarn:

yarn add -D use-client

pnpm:

pnpm i -D use-client

配置

属性	类型	解释
include	(string | IncludeConfig)[] ｜ 要转换的路径数组

IncludeConfig:

属性	类型	解释
path	string ｜ 匹配路径
insert	string	自定义插入文件首行的内容，默认值："use client"

案例

next.js配置：

const nextConfig = {
  experimental: {
    swcPlugins: [
      [
        'use-client',
        {
          include: ["@mui/material", "@mui/icons-material"，"antd", "@ant-design/icons"]
        }
      ],
    ]
  }
}

swc配置：

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "experimental": {
      "plugins": [
        ["use-client", {
          "include": ["@mui/material", "@mui/icons-material", "antd", "@ant-design/icons"]
        }]
      ]
    }
  }
}

自定义插入内容：

const nextConfig = {
  experimental: {
    swcPlugins: [
      [
        'use-client',
        {
          include: ["path/to", {
            path: "path/to",
            insert: "use strict"
          }]
        }
      ],
    ]
  }
}

常见问题

• swc 插件打断了tree shaking

目前这是一个意料之中的行为，next团队会在未来改进它。可以通过配置modularizeImports暂时解决这个问题：

const nextConfig = {
  modularizeImports: {
    "@mui/material": {
      transform: "@mui/material/{{member}}"
    },
  },
  experimental: {
    swcPlugins: [
      [
        "use-client",
        {
          include: ["@mui/material"],
        },
      ],
    ],
  },
};

注意有些函数是不遵循@mui/material/{{member}}规则的，比如：createTheme、ThemeProvider，需要单独处理成这样import { createTheme, ThemeProvider } from "@mui/material/styles

🌟🌟🌟🌟如果这个插件对您有用的话，就给作者一个star吧。🙏🙏🙏🌟🌟🌟🌟