Elastic EUI 项目本地开发环境搭建指南

Elastic EUI 项目本地开发环境搭建指南

eui Elastic UI Framework 🙌 项目地址: https://gitcode.com/gh_mirrors/eu/eui

前言

Elastic EUI 是一套基于 React 的企业级 UI 组件库，为构建一致、美观且功能丰富的用户界面提供了完整的解决方案。本文将详细介绍如何在本地搭建 Elastic EUI 的开发环境，帮助开发者快速开始组件开发与调试工作。

环境准备

Node.js 版本管理

Elastic EUI 对 Node.js 版本有明确要求，项目通过 .nvmrc 文件指定了所需的 Node.js 版本。我们强烈建议使用 nvm (Node Version Manager) 来管理 Node.js 版本。

安装步骤：

1. 安装 nvm
2. 在项目根目录执行以下命令自动安装并使用正确的 Node.js 版本：

nvm install

包管理工具

Elastic EUI 采用 Yarn v4 作为包管理工具，这是一种现代化的包管理解决方案，具有更好的性能和确定性。

配置步骤：

1. 启用 Node.js 内置的 corepack 功能：

corepack enable

2. 安装项目依赖：

yarn

注意：当切换分支后，务必重新运行 yarn 命令以确保依赖版本正确。

开发模式运行

使用 Storybook 开发组件

Storybook 是开发 UI 组件的理想工具，它提供了隔离的组件开发环境和丰富的交互功能。

启动步骤：

1. 首次运行时需要构建依赖的工作区：

yarn build:workspaces

2. 启动 Storybook 开发服务器：

yarn start

本地文档网站

Elastic EUI 提供了完整的文档网站，可以在本地运行以查看组件文档和示例。

启动步骤：

1. 首次运行时构建文档依赖：

yarn workspace @elastic/eui-website build:workspaces

2. 启动文档服务器（默认端口 3000）：

yarn workspace @elastic/eui-website start

3. 如需指定端口：

yarn workspace @elastic-eui/website start --port 9000

主题开发

Elastic EUI 的主题系统采用模块化设计，分为共享主题基础包和具体主题实现包。

主题包结构

• eui-theme-common：包含主题基础构建逻辑和类型定义
• eui-theme-borealis：包含特定主题的样式定义和设计令牌

构建主题

1. 同时构建所有主题包：

yarn build:workspaces

2. 单独构建特定主题包（在对应包目录下）：

yarn build

开发工具配置

VSCode 集成

为了获得最佳的开发体验，建议配置 VSCode 的 ESLint 插件以正确识别项目结构。

配置方法：

1. 安装 ESLint 插件
2. 在 VSCode 设置中添加：

{
  "eslint.workingDirectories": ["./packages/eui"]
}

常见问题

Apple M1 芯片兼容性问题

如果在 Apple arm64 设备上遇到 Puppeteer/chromium 相关问题，解决方案如下：

1. 如果不需要本地运行 Puppeteer 测试：

export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true

2. 如果需要本地运行 Puppeteer 测试：

• 全局安装 Chromium 二进制文件
• 更新 shell 配置文件（如 ~/.zshrc）

结语

通过本文的指导，您应该已经成功搭建了 Elastic EUI 的本地开发环境。无论是开发新组件、修改现有组件还是调整主题样式，现在都可以在本地高效地进行开发和测试。建议定期更新依赖并关注项目更新，以确保开发环境与项目要求保持同步。

eui Elastic UI Framework 🙌 项目地址: https://gitcode.com/gh_mirrors/eu/eui