在 Vite 中快速上手 IBM Carbon Design SystemReact从仓库构建到 Hello World 实战指南【免费下载链接】carbonA design system built by IBM项目地址: https://gitcode.com/GitHub_Trending/carbo/carbon本篇技术指南基于 Carbon 仓库中的 examples/vite 示例工程完整讲解如何以 Vite 作为构建工具启动一个集成 IBM Carbon Design System 的 React 应用。你将掌握从克隆仓库构建、安装依赖、启动开发服务器到引入carbon/react组件与 Sass 样式的完整流程并能理解vite.config.js中optimizeDeps等关键配置项的真实作用从而在自己的 Vite React 项目中直接复用这套配置。示例工程定位examples/vite/README.md 是整个 Carbon 仓库中面向 Vite 用户的最小可运行示例。它不依赖 Storybook、不涉及 SSR仅包含一个基于 Vite 开发服务器渲染的 React 单页应用目的是演示 Carbon Design System 的 React 组件与样式在 Vite 生态下的标准接入方式。工程本身以private: true声明说明它只服务于示例演示不会被发布到 npm。环境前置要求在运行示例之前需要确认本机环境满足 Carbon 仓库自身的约束Node.js 版本仓库根目录 package.json 声明node: 20.x建议使用 Node 20 或更高版本。包管理器仓库通过packageManager: yarn4.10.3锁定 Yarn 4Berry同时示例也兼容 npm两种方式均可用。Sassdart-sassCarbon 样式基于现代 Sass 模块系统use/with需要 dart-sass 支持。示例的 devDependencies 中直接声明了sass: ^1.93.2无需在全局额外安装。第一步构建 Carbon 仓库根目录示例工程依赖carbon/react等包而这些包在仓库中是通过 Yarn workspaces 管理的根目录 package.json 将packages/*全部纳入 workspace。因此首次使用时必须先在仓库根目录完成整体构建yarn install yarn build其中yarn install安装全部 workspace 依赖yarn build执行根目录 scripts.build 定义的任务lerna run build --stream --prefix会按拓扑顺序构建所有包包括carbon/react、carbon/styles等随后运行node tasks/generate-repo-structure.mjs生成仓库结构索引。这一步是后续示例能直接import本地 workspace 包的前提跳过它会导致carbon/react缺少构建产物而无法解析。第二步安装示例依赖并启动开发服务器完成根目录构建后进入示例目录安装依赖并启动开发服务器cd examples/vite yarn install # 或 npm install yarn dev # 或 npm run dev开发脚本由示例的 package.json 定义脚本命令作用devvite启动 Vite 开发服务器默认端口 5173支持 HMR 热更新buildvite build对应用执行生产构建输出到dist/previewvite preview在本地预览生产构建产物启动成功后用浏览器打开 http://localhost:5173 即可看到结果——页面上会渲染出一个由 Carbon 提供样式的Hello world按钮。第三步工程结构逐文件解析进入examples/vite后可以看到一个标准的 Vite React 工程examples/vite/ ├── index.html # HTML 入口挂载 #root ├── vite.config.js # Vite 配置含 carbon/react 预构建优化 ├── package.json # 依赖与脚本声明 └── src/ ├── main.jsx # React 入口createRoot 渲染 ├── App.jsx # 应用组件使用 Button └── index.scss # 引入 Carbon 全局样式HTML 入口index.html 是 Vite 的标准入口文件div idroot/div作为 React 挂载点script typemodule src/src/main.jsx以 ESM 方式加载应用。React 入口src/main.jsx 使用 React 19 的react-dom/clientAPI 完成渲染import ./index.scss; import React from react; import { createRoot } from react-dom/client; import App from ./App; const domNode document.getElementById(root); const root createRoot(domNode); root.render( React.StrictMode App / /React.StrictMode );注意入口处首先import ./index.scss——这是让 Carbon 全局样式生效的关键一步必须在组件渲染之前完成。组件示例src/App.jsx 是 Carbon React 组件的最简用法演示import { Button } from carbon/react; import React from react; export default function App() { return ( div ButtonHello world/Button /div ); }Button直接从carbon/react具名导出无需额外注册或手动引入组件样式文件这得益于 Carbon 将组件样式与组件逻辑打包在同一个包中。样式入口src/index.scss 只有一行却承担了样式系统初始化的全部工作use carbon/react with ( $font-path: ibm/plex );这里使用了 dart-sass 的模块配置语法通过with将$font-path配置为ibm/plex让 Carbon 在生成font-face规则时指向ibm/plex包内的字体资源。这意味着示例工程需要安装ibm/plex字体包该包会随 workspace 依赖一并安装。如果你的项目把字体托管在 CDN 或其他目录只需调整这个变量的取值即可。Vite 配置中的关键细节vite.config.js 是让 Carbon 在 Vite 下平滑运行的核心import { defineConfig } from vite; import react from vitejs/plugin-react; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], optimizeDeps: { include: [carbon/react], }, });两点值得深入理解vitejs/plugin-react提供 JSX 转换与 React Fast Refresh是 Vite 下开发 React 应用的标准插件。示例中声明了vitejs/plugin-react: ^5.1.1。optimizeDeps.include: [carbon/react]显式告知 Vite 的依赖预构建Dep Optimization环节提前处理carbon/react。由于 Carbon 组件库依赖链复杂内部还依赖carbon/icons-react、carbon/styles、floating-ui/react、downshift等见 packages/react/package.json显式 include 可以避免开发服务器首次访问时因动态发现依赖而产生的冷启动卡顿让 HMR 响应更稳定。这是从 Carbon 官方示例中可以直接复用到自己项目的关键配置。生产构建与预览开发调试完成后使用示例中内置的脚本完成生产构建与本地预览yarn build # 等价于 vite build产物输出到 dist/ yarn preview # 等价于 vite preview本地预览构建产物preview默认仍监听 5173 端口用于验证vite build产物的真实表现是上线前的重要检查环节。与仓库内其他示例的对比Carbon 仓库在 examples 目录下还提供了多种构建场景的示例便于对照理解examples/class-prefixNext.js 场景下自定义组件 CSS 类名前缀$prefix在use carbon/react with ( $prefix: custom )中配置。examples/id-prefix演示IdPrefix/useIdPrefix组件用于 v10 与 v11 包共存迁移期解决 id 冲突。examples/custom-theme演示自定义主题色板。这些示例与 Vite 示例共享相同的启动套路根目录yarn install yarn build再进入示例目录安装并yarn dev说明 Carbon 对各类构建工具提供了统一的接入范式。Vite 示例的优势在于零框架绑定、启动最快适合作为学习 Carbon React 组件的起点。常见问题与注意事项必须先构建仓库根目录workspace 模式下的carbon/react依赖本地源码产物跳过根目录yarn build会出现模块找不到或样式缺失的问题。必须使用 dart-sassCarbon 自 v11 起全面采用use ... with (...)模块配置语法如本示例的$font-pathnode-sass已不被支持请确保项目中安装的是sass而非node-sass。$font-path按需调整如果应用通过 CDN 加载 IBM Plex 字体应把 src/index.scss 中的$font-path改为 CDN 地址避免重复打包字体文件。端口冲突Vite 默认端口为 5173若被占用会由 Vite 自动递增端口请以终端输出的实际地址为准。通过以上四个步骤你就完成了一个集成 Carbon Design System 的 Vite React 应用从零到可运行的搭建后续开发只需在App.jsx中引入更多carbon/react组件并参考 packages/react 的组件源码与 packages/styles 的样式体系即可。【免费下载链接】carbonA design system built by IBM项目地址: https://gitcode.com/GitHub_Trending/carbo/carbon创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
在 Vite 中快速上手 IBM Carbon Design System（React）：从仓库构建到 Hello World 实战指南
在 Vite 中快速上手 IBM Carbon Design SystemReact从仓库构建到 Hello World 实战指南【免费下载链接】carbonA design system built by IBM项目地址: https://gitcode.com/GitHub_Trending/carbo/carbon本篇技术指南基于 Carbon 仓库中的 examples/vite 示例工程完整讲解如何以 Vite 作为构建工具启动一个集成 IBM Carbon Design System 的 React 应用。你将掌握从克隆仓库构建、安装依赖、启动开发服务器到引入carbon/react组件与 Sass 样式的完整流程并能理解vite.config.js中optimizeDeps等关键配置项的真实作用从而在自己的 Vite React 项目中直接复用这套配置。示例工程定位examples/vite/README.md 是整个 Carbon 仓库中面向 Vite 用户的最小可运行示例。它不依赖 Storybook、不涉及 SSR仅包含一个基于 Vite 开发服务器渲染的 React 单页应用目的是演示 Carbon Design System 的 React 组件与样式在 Vite 生态下的标准接入方式。工程本身以private: true声明说明它只服务于示例演示不会被发布到 npm。环境前置要求在运行示例之前需要确认本机环境满足 Carbon 仓库自身的约束Node.js 版本仓库根目录 package.json 声明node: 20.x建议使用 Node 20 或更高版本。包管理器仓库通过packageManager: yarn4.10.3锁定 Yarn 4Berry同时示例也兼容 npm两种方式均可用。Sassdart-sassCarbon 样式基于现代 Sass 模块系统use/with需要 dart-sass 支持。示例的 devDependencies 中直接声明了sass: ^1.93.2无需在全局额外安装。第一步构建 Carbon 仓库根目录示例工程依赖carbon/react等包而这些包在仓库中是通过 Yarn workspaces 管理的根目录 package.json 将packages/*全部纳入 workspace。因此首次使用时必须先在仓库根目录完成整体构建yarn install yarn build其中yarn install安装全部 workspace 依赖yarn build执行根目录 scripts.build 定义的任务lerna run build --stream --prefix会按拓扑顺序构建所有包包括carbon/react、carbon/styles等随后运行node tasks/generate-repo-structure.mjs生成仓库结构索引。这一步是后续示例能直接import本地 workspace 包的前提跳过它会导致carbon/react缺少构建产物而无法解析。第二步安装示例依赖并启动开发服务器完成根目录构建后进入示例目录安装依赖并启动开发服务器cd examples/vite yarn install # 或 npm install yarn dev # 或 npm run dev开发脚本由示例的 package.json 定义脚本命令作用devvite启动 Vite 开发服务器默认端口 5173支持 HMR 热更新buildvite build对应用执行生产构建输出到dist/previewvite preview在本地预览生产构建产物启动成功后用浏览器打开 http://localhost:5173 即可看到结果——页面上会渲染出一个由 Carbon 提供样式的Hello world按钮。第三步工程结构逐文件解析进入examples/vite后可以看到一个标准的 Vite React 工程examples/vite/ ├── index.html # HTML 入口挂载 #root ├── vite.config.js # Vite 配置含 carbon/react 预构建优化 ├── package.json # 依赖与脚本声明 └── src/ ├── main.jsx # React 入口createRoot 渲染 ├── App.jsx # 应用组件使用 Button └── index.scss # 引入 Carbon 全局样式HTML 入口index.html 是 Vite 的标准入口文件div idroot/div作为 React 挂载点script typemodule src/src/main.jsx以 ESM 方式加载应用。React 入口src/main.jsx 使用 React 19 的react-dom/clientAPI 完成渲染import ./index.scss; import React from react; import { createRoot } from react-dom/client; import App from ./App; const domNode document.getElementById(root); const root createRoot(domNode); root.render( React.StrictMode App / /React.StrictMode );注意入口处首先import ./index.scss——这是让 Carbon 全局样式生效的关键一步必须在组件渲染之前完成。组件示例src/App.jsx 是 Carbon React 组件的最简用法演示import { Button } from carbon/react; import React from react; export default function App() { return ( div ButtonHello world/Button /div ); }Button直接从carbon/react具名导出无需额外注册或手动引入组件样式文件这得益于 Carbon 将组件样式与组件逻辑打包在同一个包中。样式入口src/index.scss 只有一行却承担了样式系统初始化的全部工作use carbon/react with ( $font-path: ibm/plex );这里使用了 dart-sass 的模块配置语法通过with将$font-path配置为ibm/plex让 Carbon 在生成font-face规则时指向ibm/plex包内的字体资源。这意味着示例工程需要安装ibm/plex字体包该包会随 workspace 依赖一并安装。如果你的项目把字体托管在 CDN 或其他目录只需调整这个变量的取值即可。Vite 配置中的关键细节vite.config.js 是让 Carbon 在 Vite 下平滑运行的核心import { defineConfig } from vite; import react from vitejs/plugin-react; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], optimizeDeps: { include: [carbon/react], }, });两点值得深入理解vitejs/plugin-react提供 JSX 转换与 React Fast Refresh是 Vite 下开发 React 应用的标准插件。示例中声明了vitejs/plugin-react: ^5.1.1。optimizeDeps.include: [carbon/react]显式告知 Vite 的依赖预构建Dep Optimization环节提前处理carbon/react。由于 Carbon 组件库依赖链复杂内部还依赖carbon/icons-react、carbon/styles、floating-ui/react、downshift等见 packages/react/package.json显式 include 可以避免开发服务器首次访问时因动态发现依赖而产生的冷启动卡顿让 HMR 响应更稳定。这是从 Carbon 官方示例中可以直接复用到自己项目的关键配置。生产构建与预览开发调试完成后使用示例中内置的脚本完成生产构建与本地预览yarn build # 等价于 vite build产物输出到 dist/ yarn preview # 等价于 vite preview本地预览构建产物preview默认仍监听 5173 端口用于验证vite build产物的真实表现是上线前的重要检查环节。与仓库内其他示例的对比Carbon 仓库在 examples 目录下还提供了多种构建场景的示例便于对照理解examples/class-prefixNext.js 场景下自定义组件 CSS 类名前缀$prefix在use carbon/react with ( $prefix: custom )中配置。examples/id-prefix演示IdPrefix/useIdPrefix组件用于 v10 与 v11 包共存迁移期解决 id 冲突。examples/custom-theme演示自定义主题色板。这些示例与 Vite 示例共享相同的启动套路根目录yarn install yarn build再进入示例目录安装并yarn dev说明 Carbon 对各类构建工具提供了统一的接入范式。Vite 示例的优势在于零框架绑定、启动最快适合作为学习 Carbon React 组件的起点。常见问题与注意事项必须先构建仓库根目录workspace 模式下的carbon/react依赖本地源码产物跳过根目录yarn build会出现模块找不到或样式缺失的问题。必须使用 dart-sassCarbon 自 v11 起全面采用use ... with (...)模块配置语法如本示例的$font-pathnode-sass已不被支持请确保项目中安装的是sass而非node-sass。$font-path按需调整如果应用通过 CDN 加载 IBM Plex 字体应把 src/index.scss 中的$font-path改为 CDN 地址避免重复打包字体文件。端口冲突Vite 默认端口为 5173若被占用会由 Vite 自动递增端口请以终端输出的实际地址为准。通过以上四个步骤你就完成了一个集成 Carbon Design System 的 Vite React 应用从零到可运行的搭建后续开发只需在App.jsx中引入更多carbon/react组件并参考 packages/react 的组件源码与 packages/styles 的样式体系即可。【免费下载链接】carbonA design system built by IBM项目地址: https://gitcode.com/GitHub_Trending/carbo/carbon创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
