企业官网建设流程全解析

10分钟跑通 Evergreen React UI 组件库：从克隆到本地预览

【免费下载链接】evergreen🌲 Evergreen React UI Framework by Segment项目地址: https://gitcode.com/gh_mirrors/evergreen1/evergreen

当你给内部工具手写的按钮、弹框、表单控件开始互相污染新页面的布局时，你想要的是一套视觉统一、默认值就合理的组件库，而不是又一份设计规范。Evergreen 就是 Segment 出品的 React UI 组件库：40 多个生产级组件（Button、Dialog、Select、FileUploader 等）建在 CSS-in-JS 和ui-box（一个可自由组合的布局基元组件）之上，开箱即用，也允许完全换肤。下面你要做两件事：先跑起它的官方组件展示台 Storybook，再看官方文档站怎么起。

环境自检清单：30秒判断能不能开工

如果你的 Node 是 16/18/20，别赌"应该没问题"，先nvm install 14.18 && nvm use 14.18。仓库工具链（webpack 4、Storybook 6）在 Node 17+ 上会直接崩，这是后面速查表里的第一条报错。

最小可用路径：4条命令从克隆到浏览器

这条命令链做三件事：克隆仓库、装依赖、起 Storybook 开发服务器，跑完你在浏览器里就能看到全部组件：

git clone https://gitcode.com/gh_mirrors/evergreen1/evergreen cd evergreen yarn install yarn dev

yarn install跑完不应有报错（devDependencies 多，首次几分钟属正常），yarn dev会打印监听地址。打开http://localhost:6006，左侧是组件目录，点任意一项右侧实时渲染。

两个附注，不用分心：

• 用 npm 也能起：npm install后npx start-storybook -p 6006。但锁文件不跟yarn.lock走，会多拉一棵重复依赖树，这里就用 Yarn。
• 仓库根目录没有start脚本——你在别处看到的 3000 端口是docs/里的文档站，它是独立 Next.js 工程：cd docs && yarn install && yarn dev，再开http://localhost:3000。

要产出组件库本体的构建产物就yarn build，会并发生成commonjs/、esm/、umd/、types/四个目录，跑预览可以跳过这步。

关键配置拆解：先看清这三处再动手

Node 版本不兼容怎么排查：先看 .nvmrc

• 改什么：用 nvm 一类工具把运行时钉到 14.18，别用系统里的最新版 Node 硬跑。
• 为什么：package.json里engines写的是node >= 14，.nvmrc才把范围收窄到 CI 验证过的 14.18。
• 不改会怎样：Node 17+ 上 webpack 4 调 md5 直接抛error:0308010C:digital envelope routines::unsupported，部分依赖的 node-gyp 阶段也装不上。

为什么 .npmrc 里的 package-lock=false 不能无视

• 改什么：确认安装全程走 Yarn，别混进 npm。
• 为什么：.npmrc里package-lock=false明确拒绝维护package-lock.json，仓库的依赖基准只有yarn.lock这一份。
• 不改会怎样：npm 自己解一棵树，版本和 CI 跑偏，依赖树里还可能混进第二个 React，hooks 报两种实例的错。

docs/ 报 Cannot find module 怎么办：它是独立安装

• 改什么：根目录装完后，进docs/再单独装一次。
• 为什么：docs 是独立 Next.js 工程，自带package.json，还锁了 React 17，根目录安装完全不覆盖它。
• 不改会怎样：yarn dev起文档站时Cannot find module 'next'或解析不到evergreen-ui。

高频报错速查：四张最常撞上的报错

深入方向：仓库内的文档与示例

跑起来之后按这个顺序逛：

• 官方文档站源码：所有.mdx文档页，左侧导航结构定义在 docs/constants/IA.ts
• 上手指南 与 主题定制
• SSR 示例工程：Next.js 服务端渲染 + 自动水合的完整用法
• 组件源码：每个目录一个组件，stories 和测试都在旁边
• codemods：基于 jscodeshift 的大版本迁移自动化脚本

【免费下载链接】evergreen🌲 Evergreen React UI Framework by Segment项目地址: https://gitcode.com/gh_mirrors/evergreen1/evergreen