ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

Lexical 开源贡献指南:从 Fork、本地开发到 E2E 测试与 PR 合入的完整工作流

Lexical 开源贡献指南:从 Fork、本地开发到 E2E 测试与 PR 合入的完整工作流 Lexical 开源贡献指南从 Fork、本地开发到 E2E 测试与 PR 合入的完整工作流【免费下载链接】lexicalLexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.项目地址: https://gitcode.com/GitHub_Trending/le/lexical本指南以 Lexical 仓库根目录的 CONTRIBUTING.md 为主线系统讲解如何为这个可扩展文本编辑器框架提交代码从环境准备、Fork 分支、依赖安装到本地起服务、运行单元测试与 Playwright E2E 测试、通过 lint 与类型检查再到提交 CLA 并最终合入 PR。读完本文你将掌握一套可复现的 Lexical 贡献流程并理解 monorepo 中 dev server、collab server、playground 与各类测试命令之间的真实协作关系。参与贡献的两种方式CONTRIBUTING.md 明确了两条参与路径Pull Requests主动提交代码修复或功能改进是代码贡献的主通道Issues报告公开 bug项目使用 GitHub Issues 跟踪问题要求描述清晰、包含足够可复现问题的步骤。需要特别注意的是安全问题的处理方式Meta 为安全 bug 提供专门的披露流程涉及安全漏洞时应当走该流程而不是提交公开 Issue。环境准备Node 版本与 pnpm 安装仓库是标准的 pnpm monorepoworkspace 定义见 pnpm-workspace.yaml根 package.json 声明了严格的运行环境约束包管理器pnpm11.24.0packageManager字段要求pnpm 11.0.0Node.js 20.19.0engines字段并在 pnpm-workspace.yaml 中开启engineStrict: true版本不满足时安装会直接失败。如果本机尚未安装 pnpmCONTRIBUTING.md 提供了两种方式npm install -g pnpm # 或使用 corepack兼容所有 Node.js 版本 npx corepacklatest enablecorepack是随 Node.js 分发的工具启用后会自动按仓库packageManager字段锁定的版本执行 pnpm因此推荐在 Node 20.19.0 环境下直接使用。提交 Pull Request 的标准流程CONTRIBUTING.md 给出了七步走的标准流程项目积极欢迎PR原文为 We actively welcome your pull requestsFork 仓库并从main分支创建自己的开发分支在仓库根目录运行pnpm install安装全部依赖workspace 会一次性装好packages/*与dev-examples/*下的所有包新增代码必须配套测试——添加了需要测试的代码就补上测试改动公开 API 必须同步更新文档确保整个测试套件通过确保代码通过 lint 检查若尚未签署完成Contributor License Agreement贡献者许可协议CLA——只需签署一次即可参与 Meta 旗下所有开源项目。关于第 4 步的文档维护仓库内 packages/lexical-website 是 Docusaurus 文档站API 变更说明通常需要同步到其中的概念文档如 shadow-dom.md 这类文档。提交信息与 PR 格式仓库 AGENTS.md 对提交纪律有更细的约定可作为 PR 阶段的行为准则每条 commit message 都应按照.github/pull_request_template.md的形状书写主题行格式为[Affected Packages] PR Type: titlePR Type 为 Breaking change / Refactor / Feature / Bug Fix / Documentation Update / Chore 之一并包含## Description与## Test plan含### Before/### After的真实输出。同时在 open source 项目中提交信息里不应包含任何私有会话链接。本地开发dev server 与 collab server 的区别CONTRIBUTING.md 特别提醒运行 E2E 测试前必须先把本地服务器跑起来。对应的两条命令来自根 package.jsonpnpm run start pnpm run test-e2e-chromium # 只运行 chromium 的 E2E 测试其中pnpm run start的实际定义为start: cross-env NODE_ENVdevelopment concurrently \pnpm:collab\ \pnpm -C packages/lexical-playground run dev\即它同时启动两个服务命令作用端口pnpm -C packages/lexical-playground run dev启动 playground 开发服务器示例富文本编辑器应用默认 3000pnpm run collab启动协同编辑collaborationWebSocket 服务器基于y-websocketlocalhost:1234而pnpm run dev只启动 playground dev server、不启动 collabdev: pnpm -C packages/lexical-playground run dev因此只需做常规编辑器功能开发与调试用pnpm run dev即可启动更快要调试协同编辑对应E2E_EDITOR_MODErich-text-with-collab场景才需要用pnpm run start。文档站开发与构建如果贡献的是网站或文档内容CONTRIBUTING.md 提供了两条命令pnpm run start:website # 本地启动 Docusaurus 文档站端口 3001 pnpm -C packages/lexical-website run build # 完整构建文档站根 package.json 中start:website的定义为pnpm -C packages/lexical-website run start --port 3001构建脚本则直接用pnpm -C切换到 packages/lexical-website 包执行其 build。此外根目录还有对应的pnpm run build-docs便捷命令。E2E 测试Playwright 三浏览器矩阵CONTRIBUTING.md 示例的pnpm run test-e2e-chromium只是 E2E 矩阵的一角。查看根 package.json 与 playwright.config.mjs 可得到完整全貌。测试脚本与浏览器选择pnpm run test-e2e-chromium # E2E_BROWSERchromium pnpm run test-e2e-firefox # E2E_BROWSERfirefox pnpm run test-e2e-webkit # E2E_BROWSERwebkit这些命令通过cross-env注入E2E_BROWSER环境变量再交给playwright test --projectchromium|firefox|webkit。配置层面playwright.config.mjs 为三个 project 都指定了testDir: ./packages/lexical-playground/__tests__/即 E2E 用例全部位于 packages/lexical-playground/tests/e2e例如AutoLinks.spec.mjs、CodeBlock.spec.mjs、Collaboration.spec.mjs等按功能组织的 spec 文件。编辑器模式变体除浏览器维度外E2E 还通过E2E_EDITOR_MODE覆盖不同编辑器形态默认富文本模式rich-textE2E_EDITOR_MODEplain-text纯文本模式如pnpm run test-e2e-plain-chromiumE2E_EDITOR_MODErich-text-with-collab/rich-text-with-collab-v2协同模式如pnpm run test-e2e-collab-chromium此时需要pnpm run collab的 WebSocket 服务在线playwright.config 也会因此把视口宽度调大到 3000px为固定渲染在右侧的上下文菜单留出空间。调试 E2E需要浏览器界面逐步调试时使用pnpm run debug-test-e2e-chromium等价于E2E_BROWSERchromium playwright test --debug --projectchromium。PWDEBUG1模式下 Playwright 会自动关闭重试、串行执行并放慢操作避免调试中断点混乱。CI 模式下的服务器管理本地跑 E2E 需要手动先启动 dev server而在 CI 中playwright.config.mjs 检测到CItrue时会启用webServer配置自动执行pnpm run start-test-server即pnpm -C packages/lexical-playground run preview预览构建产物并等待http://localhost:4000就绪。仓库为此准备了完整脚本pnpm run test-e2e-ci-chromium # 先构建 playgroundprepare-ci再跑 E2E端口 4000 pnpm run test-e2e-collab-ci-chromium # 协同模式 CIconcurrently 同时拉起 collab 与测试单元测试与浏览器测试Vitest 多 project除了 Playwright E2E贡献者还应当关注单元测试与浏览器模式测试二者由 vitest.config.mts 统一管理共包含六个 projectproject环境测试位置命令unitjsdompackages/**/__tests__/unit/**/*.test.{ts,tsx}pnpm run test-unitbrowser真实浏览器Playwright 驱动默认 chromium可用VITEST_BROWSERfirefox,webkit扩展packages/**/__tests__/browser/**/*.test.{ts,tsx}pnpm run test-browserscripts-unitnodescripts/**/__tests__/unit/**/*.test.tspnpm run test-unitintegrationnodescripts/__tests__/integration/**/*.test.mjspnpm run test-integrationbench/bench-domnode / jsdompackages/*/src/__bench__/*.bench.tspnpm run bench其中 browser project 通过vitest/browser-playwright在真实浏览器中运行用于验证依赖真实布局/选区引擎的行为如Range.getBoundingClientRect、Selection API弥补 jsdom 的不足它固定使用 8315 端口避开 Windows 上 Hyper-V 保留的临时端口段。配置同时从 tsconfig.test.json 的paths构建 monorepo 别名保证跨包深层源码导入在测试中可解析。代码质量门禁lint、prettier 与类型检查CONTRIBUTING.md 要求确保代码通过 lint。仓库在此之上构建了完整的多层检查见 package.json 的 scriptspnpm run lint # ESLint 全仓检查 pnpm run lint:fix # 自动修复 pnpm run prettier # 检查代码格式--list-different pnpm run prettier:fix # 自动格式化 pnpm run tsc # TypeScript 编译检查 pnpm run flow # Flow 类型检查packages/*/flow 目录下的 .flow 定义 pnpm run ci-check # 一键并行跑 tsc / tsc-scripts / tsc-extension / tsc-website / flow / prettier / lint由于 Lexical 源码同时维护 TypeScript 与 Flow 两套类型系统AGENTS.md 特别强调新增或修改公开 API 时必须同时维护两边的类型定义且所有改动必须向后兼容——不得删除或重命名既有公开 API、不得改变既有签名/返回类型、必须保持EditorState与节点 JSON 的序列化格式稳定。PR 提交前建议直接运行pnpm run ci-check一次性覆盖全部门禁。贡献者许可协议CLA与安全披露在 PR 被接受之前必须提交 CLA。CONTRIBUTING.md 说明只需签署一次即可参与 Meta 旗下所有开源项目。具体签署入口在文档中的 CLA 页面code.facebook.com/cla。同时仓库对安全 bug 有专门通道Meta 运行着一个安全 bug 悬赏项目涉及安全漏洞时请按其流程处理不要提交公开 Issue。许可协议贡献即授权CONTRIBUTING.md 的 License 一节说明向 Lexical 贡献即表示同意你的贡献按仓库根目录 LICENSEMIT License版权归 Meta Platforms, Inc.授权。因此参与贡献前应确保自己有相应代码的授权能力。贡献流程速查阶段命令 / 操作环境Node 20.19.0npm install -g pnpm或npx corepacklatest enable安装pnpm install本地开发pnpm run dev仅 playgroundpnpm run startplayground collab文档站pnpm run start:websitepnpm -C packages/lexical-website run build单元测试pnpm run test-unitwatchtest-unit-watch浏览器测试pnpm run test-browserVITEST_BROWSERfirefox,webkit扩展矩阵E2E 测试先起 server再pnpm run test-e2e-chromium/-firefox/-webkit调试用debug-test-e2e-chromium质量门禁pnpm run lint、pnpm run prettier、pnpm run tsc、pnpm run flow或一键pnpm run ci-check协议签署 CLA一次即可安全漏洞走专门披露流程不提交公开 Issue按上述流程走完 fork、开发、测试、lint 与 CLA 五步你的 PR 就能进入 Lexical 维护者的合入流程——这也是仓库 CONTRIBUTING.md 官方推荐的唯一正式贡献路径。【免费下载链接】lexicalLexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.项目地址: https://gitcode.com/GitHub_Trending/le/lexical创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表