React和Preact 这样处理className更优雅

React和Preact写className，我不太习惯使用模板字符串，不好看，看起来也不直观，写了如下两个库： react-runtime-clsx 和 preact-runtime-clsx，来辅助开发，可以更方便的处理className的问题，下面就介绍一下如何使用他们，来达到更高效便捷的开发,这两个库用法一样，以react为例来讲解

安装

pnpm add -S react-runtime-clsx
pnpm add -S preact-runtime-clsx

配置

介绍一下在Vite和Webpack中如何配置，其中tsconfig.json 配置是一样的，如下 tsconfig.json

   "compilerOptions":{
      "jsx": "react-jsx",
      "jsxImportSource": "react-runtime-clsx",
   }

vite

vite-config.ts 文件

mport { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
    css: {
        devSourcemap: true
    },
    plugins: [
        react({ jsxImportSource: 'react-runtime-clsx' })
    ],
    build: {
        sourcemap: true
    }
})

webpack

webpack.config.ts

需要配置babel，借助babel对代码进行处理

presets:[
    [
        "@babel/preset-react",
        {
            runtime: 'automatic',
            importSource: 'react-runtime-clsx' 
        }
    ]
]

正常的这样配置就可以了，也有一些特殊的场景，比如一些脚手架已经帮我们封装好了，像Rspress，Dumi等我们也想使用也是可以的

在vite 中的preact使用

preact Vite

import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'
export default defineConfig({
    plugins: [preact({
        exclude: /node_modules/,
        include: ['**/*.(t|j)sx'],
        babel: {
            plugins: [
                [
                    '@babel/plugin-transform-react-jsx',
                    {
                        runtime: 'automatic',
                        importSource: 'preact-runtime-clsx'
                    },
                    '@babel/plugin-runtime-react-jsx'
                ]
            ]
        }
    })],
})

使用

因为是利用了clsx库，所以用法和clsx用法是一样的，下面就分别介绍在元素和逻辑中如何使用的

HTML元素 转换前

import $style from './index.scss';
const App = function () {
    return <div className={[$style.app, { [$style.b]: true }]}>我是内容</div>;
};

export default App;

转换后

<div class="p_index_app_GNsb p_index_b_EN5E">我是内容</div>

ES逻辑

import { clsx, ClassValue } from 'react-runtime-clsx';
import $style from './index.scss';

const App = function () {
    const classList: ClassValue = clsx($style.app, { [$style.b]: true });
    console.log('classList', classList);
    return <div className={classList}>我是内容</div>;
};

export default App;

console打印内容

classList p_index_app_GNsb p_index_b_EN5E

转换后页面

<div class="p_index_app_GNsb p_index_b_EN5E">我是内容</div>

可以看到是一样的，用起来是不是很方便,而且也不用到处引用import React from React,安装这个库后也不需要再安装clsx库了，一块react-runtime-clsx 就搞定了，希望大家点赞支持，谢谢