DEX475

课程介绍

同学们，今天咱们聊聊一个特别酷的新东西，就是Salesforce DX HCP服务器。它就像给咱们Lightning Web Components开发装上了一套人工智能工具箱。怎么理解呢？它是通过一个叫模型上下文协议的技术，也就是MCP，把30多个AI工具整合起来，专门帮我们写LWC代码。 这30多个工具分成了三个大的工具集，方便咱们按需取用。第一个叫lwc-experts，里面包括了开发、测试、SDDS数据服务、LDS数据服务、基础组件、甚至还有Figma设计稿转代码、安全检查、代码迁移这些工具。第二个叫Aura-experts，它主要是帮我们从老的Aura框架迁移到LWC，提供蓝图和自动迁移工具。第三个叫专家验证，它会从生产环境就绪的角度给项目打分，范围是0到100分，非常直观。 那怎么配置这些工具呢？很简单，在HCP服务器的JSON配置文件里，我们可以用 --tools set 这个标志来整体启用工具集，我的建议是直接把三个工具集都打开，这样功能最全。如果你只想挑某一个具体工具，也可以用 --tools 标志指定单个工具。注意一点，有些工具还没正式发布，也就是非GA状态，要使用它们的话，记得加上 --allow-non-ga-tools 这个标志，否则调用不了。 使用方式也很灵活。最推荐的是通过Agentforce Vibes这个扩展，它是一个预配置好的环境，开箱即用。当然，如果你习惯在VS Code或者Cursor里写代码，也可以直接配合Copilot来调用这套工具。 最后要提醒一下，目前这个服务还处于测试版阶段，所以使用时会受到测试版服务条款的约束，大家心里有数就好。 总之，这个HCP服务器就像是一个智能开发助手团队，帮我们把LWC开发效率提得高高的，课后可以动手试一试，感受一下AI带来的便捷。

课程章节

本课程共有 5 个章节

• 1

  Configuration & Three Toolsets Overview

  第 390 页

  同学们，咱们今天来看一个非常实用的配置，就是怎么在开发Lightning Web Components的时候，把Salesforce的AI助手——Agentforce Vibes给用起来。 首先你得知道，这个DX HCP服务器是可以通过一个配置文件来启动的。这个文件叫做SON文件，你只需要在里面写好三样东西：第一个是 `@salesforce/mcp` 这个包，相当于指定了我们要用的工具库；第二个是你要部署到哪个目标组织；第三个就是你想启用哪一组工具集。 那这些工具集一共有三套，覆盖面很广，听我给你捋一捋—— 第一套是“LWC专家”，它下面分了8个小的子类别，总共有34个工具，几乎涵盖了写Lightning Web Components时你需要做的所有事情，比如创建组件、调样式、写测试，都能帮你一把。 第二套是“Aura专家”，这个主要是用来做迁移的。它包含4个专门的迁移工具，能帮咱们把老的Aura组件转成新的LWC，减少手动改代码的痛苦。 第三套是“专家验证”，它只给了2个评分工具，但是很关键，能对你的代码质量、安全合规这些方面打个分，告诉你哪里需要改进。 然后咱们实际使用Agentforce Vibes的时候，它默认就会帮你开启四个工具，你不需要额外配置就能享受到基础能力。 但这里有个小坑要注意哦：如果你想用那些还没有正式发布的工具，也就是非GA工具，那么一定要在命令里显式地加上 `--allow-non-ga-tools` 这个标志，否则它们是调不出来的。 另外还有一点经常被忽略，要想让Agentforce Vibes正常工作，你必须先启用两个全局的规则文件，没有它们，很多功能是会受限的。 那这些工具要怎么调用呢？有两种方式：最推荐的就是直接用Agentforce Vibes扩展，它已经预先配置好了，装上就能用。当然，如果你用的是其他兼容MPP的客户端，比如Cursor，或者带Copilot的VS Code，也可以通过简单的自然语言提示来召唤这些工具，你就说“帮我把这个Aura组件迁移成LWC”，它就会自动去调对应的工具了。 最后也是最重要的一点：所有AI生成的输出，无论看起来多漂亮，你都必须亲自审查它的准确性。代码里有没有漏洞？业务逻辑对不对？一定要认真看过再部署，千万不要盲目信任机器。 好了，记住这几点，你就能安全又高效地利用AI来加速LWC开发了。有什么疑问，我们随时讨论。

  ▶ 播放视频 查看详情
• 2

  LWC Development Tools — Creation, Best Practices & Accessibility

  第 391 页

  大家好，今天我们来聊聊Lightning Web Components开发中用到的13个开发工具。这些工具覆盖了从创建到优化的整个生命周期，能帮你省不少事儿。 首先，咱们先看GA工具，也就是正式发布的工具。它们包括：工作流程指南，帮你理清开发步骤；最佳实践审查，确保代码规范；从PRD直接生成组件原型；分步创建编排，引导你一步步搭建组件；性能优化，提升页面速度；可访问性审计，保证无障碍体验；还有RTL国际化支持，让组件适配从右向左的语言；最后，编译错误参考，帮你快速排查编译问题。 然后是几个非GA工具，使用时需要加上--allow-non-ga这个标记。它们有SDS蓝图探索，让你浏览设计系统蓝图；造型挂钩查找，帮你找到可用的样式钩子；蓝图指导，提供蓝图使用建议；以及SDS 2提升迁移，辅助你将旧版SDS升级到新版。 还有一个很强大的工具叫AID到组件，它的命令是Create_lwc_component_from_prd。这个工具能串联调用其他工具，一步完成Figma设计稿转换、性能优化、自动化测试和LDS数据探索，非常高效。 最后，关于SLDS工具，它支持用名称、类别、组件、SLDS类名，还有样式钩子进行过滤。过滤模式可以选精确匹配、前缀匹配、预设匹配或者模糊匹配，帮你精准找到需要的样式资源。 每个工具都有特定的提示模式，这章的幻灯片里为每个工具都提供了示例提示，可以参考使用。这些工具串联起来，就能让你的LWC开发更加顺畅。好了，今天的内容就到这里，下节我们具体看看几个工具怎么用。

  ▶ 播放视频 查看详情
• 3

  Testing, Base Components & LDS MCP Tools

  第 392 页

  好，我们来看看这几个工具部分，到底在讲什么。我先给你捋一下，用大白话帮你理解。 首先是，测试工具，。它其实覆盖了五个方面，就像五个步骤的检查清单。第一个叫“精心安排的测试工作流程”，其实就是帮你自动生成测试计划，不用你自己从头想怎么测。第二个是创建Jest测试，这种测试专门针对组件不同状态——比如数据正在加载、加载成功啦、数据是空的、或者出错了这四种情况，每种都要覆盖。第三个是帮你审查和验证已经写好的测试，看看有没有漏掉什么。第四个是专门做可访问性测试的，确保你的组件对那些使用屏幕阅读器的人友好。最后一个，生成页面对象，方便后续自动化测试用，不过这个功能暂时还不是正式发布版。 接下来是，基本组件工具，。它用了一个两步走的模式：首先，有一个“guide_lBC_usage”工具帮你识别哪些地方可以换成基本组件；然后第二个“explore_lBC_components”工具会给你详细说明，告诉你怎么用这些组件，就像一本使用指南。 再来看，LDS工具，，这是管理数据的一整套工具，而且全部功能都是正式可用的。它涵盖了数据的整个生命周期：你可以用UI API探索数据怎么显示，有开发指南告诉你怎么写代码，它能保证数据一致性，维护引用完整性，还能帮你编排复杂的数据请求。最厉害的是，它完整支持GraphQL，包括获取模式信息、创建读取或修改数据的查询，还有直接测试这些查询。 说到GraphQL，它有一个特定的工作流程，把四个工具串起来了：先是看指南了解怎么用，然后查看数据模式，接着创建具体的查询语句，最后测试这些查询。就像一条流水线。 最后这个，Figma-to-LWC，，是把设计直接转成代码的工具。你需要准备两个东西：一个Figma的访问令牌，还要连接到Framelink HCP服务器。工具会分析你的设计稿结构，然后生成带SIDS集成的Lightning Web Component代码，也就是说，生成的代码就直接挂钩了Salesforce的数据服务，方便直接调用。 这样解释，是不是清楚多了？每个工具都是帮你把重复劳动自动化，让你能专注在业务逻辑上。

  ▶ 播放视频 查看详情
• 4

  Migration, Security & Validation Tools

  第 393 页

  同学们，我们来看一下这一页内容，讲的是把Aura组件迁移到LWC时，怎么保证质量、安全和顺利过渡。 首先，我们有一套，迁移验证，工具，它就像一个检查清单，帮你确认组件是否真的准备好了。它还能指导你使用Lightning Out把组件嵌入到外部页面。 接着是，LWS安全工具，，专门分析你的组件有没有安全漏洞，比如常见的跨站脚本攻击（XSS）或DOM注入。它会检查你的编码模式是不是安全，还会查你用的第三方库有没有合规问题。 那么，从Aura迁移到LWC到底怎么做呢？这里提供了两种工作流程，你可以根据自己的团队和项目来选择。 第一种叫，协调工作流，，你只需要运行一条命令，它就会自动完成所有四个步骤。这种方式特别适合小型或中型的独立组件，因为速度快，一步到位。 第二种叫，受控工作流，，它让你一步步来，每个步骤都单独运行。这样你就可以边改边跟团队成员商量，迭代优化，还能随时让相关方确认进度，适合复杂组件或需要多方协作的场景。 整个受控工作流其实就是一个精心设计的链条，有五个阶段： - ，起草CPD，：先写好组件性能描述文档，理清逻辑。 - ，增强，：提升代码质量。 - ，确认准备情况，：确保真的可以迁移了。 - ，生成LWC，：正式产出新的LWC组件。 - ，优化和测试，：打磨细节并充分测试。 现在我们有个，验证工具，（还在开发者预览版），它会运行五个验证器，每个都有不同的评分权重，帮你算出一个总分。 - 安全性占50%权重，最重要。 - 代码分析器占30%。 - 可访问性、最佳实践、数据各占20%，因为这三项合起来也很关键。 评分时会有惩罚：发现一个，错误扣20分，，一个，警告扣4分，，如果是，注释提醒就不扣分，。 最后你会得到一个质量等级： - 总分90以上，是“生产审查”级别，基本上可以直接部署。 - 60到89分，属于“原型”级别，还需要再完善。 - 低于60分，就是“草稿”状态，需要大量改进。 很有意思的是，只要出现一个安全错误，即使其他项满分，你的总分也会直接从100降到93，因为安全错误一次扣20分，权重很大。所以安全问题是绝对不能轻视的！ 这样讲，大家应该对迁移中的验证、安全和流程有了清晰的了解了吧？记得在实际操作中去亲身体验一下这些工具哦。

  ▶ 播放视频 查看详情
• 5

  Thank You

  第 394 页

  好的同学们，我们来看这一页总结。它把咱们刚学完的、在LWC开发中使用DX HCP这套AI驱动工具的完整体系，从头到尾串了一遍。我带着大家快速过一下，帮你们把思路理顺。 首先，我们从环境配置开始。想用这套AI助手，得先搭好HCP服务器，里面装三个核心工具集：lwc-experts专门帮咱们写LWC，aura-experts针对Aura组件，experts-validation负责校验。激活它们需要命令行里带上特定标志，比如--toolets、--tools，还有想试用非正式版工具时用的--allow-non-ga-tools。我还建议大家把Agentforce Vibes扩展装上，它就像个贴心客户端，能大幅提升开发体验。 配置好后，我们手上就有了足足30多个工具，分成了10大类，每个工具都标明了是正式发布还是试用状态，方便你按需选用。 接下来咱们深入了开发工具区。它能给你实时的工作流指导，审查最佳实践，甚至根据产品需求直接生成组件雏形。从逐步创建、性能优化，到无障碍化、RTL从右到左布局适配，再到SLDS蓝图、样式钩子的自动提示，连编译错误都能给出修复参考，覆盖了编码的所有环节。 测试部分也毫不含糊。Jest单元测试可以自动生成并审查，还能做无障碍合规性测试，以及用UTOM进行用户界面自动化监测。 然后咱们接触了更强大的能力：基础组件发现、Lightning数据服务工具集。这些工具能帮你处理UI API调用，检查数据一致性、引用完整性，甚至完成整套GraphQL工作流程。还有让人兴奋的Figma到LWC的转换——通过Framelink集成，设计稿能直接转成组件代码。当然，SLDS设计指南、迁移验证、LWS轻量级安全分析也都在里面。 针对老旧Aura组件的迁移，我们学了一整套工作流：既有精心安排的逐步迁移法，也有更直接的受控转换方式，应对不同场景。 最后是生产环境的上线验证。我们讲了用五个验证器做加权评分，最终会产出一个“准备状态分数”和一个“质量等级”，让上线决策有据可依。 总之一句话，这些知识就像给了你一个超级加速器，能帮你用AI的力量，把Lightning Web Components从设计、编码、测试到迁移、上线的整个生命周期都跑得更快更稳。大家课后可以对照这张图，再好好消化一下。

  ▶ 播放视频 查看详情