Salesforce LWC学习(一)Salesforce DX配置

LWC: Create a Salesforce DX Project and Lightning Web Component：https://www.youtube.com/watch?v=p268YjunARA&feature=youtu.be

Build App with Package Development：https://trailhead.salesforce.com/en/content/learn/trails/sfdx_get_started

Salesforce DX(Developer Experience) Develop Guide: https://resources.docs.salesforce.com/220/latest/en-us/sfdc/pdf/sfdx_dev.pdf

Salesforce CLI Command Reference：https://resources.docs.salesforce.com/220/latest/en-us/sfdc/pdf/sfdx_cli_reference.pdf

邵悦老师的Salesforce DX视频分享：https://mubu.com/doc/ACZ7LXEIG （里面对很多概念进行了详细的描述，可以优先看这个里面的视频）

 最开始做salesforce开发时使用eclipse，后来因为太笨重以及不太方便所以改用了sublime + haoide。sublime + haoide无论是做classic还是使用aura 开发lightning都很爽，而且轻便型以及强大的功能更让人欲罢不能。因为salesforce推出LWC需要使用salesforce DX，所以后期学习以及项目开发尝试的去了解和使用Visual Studio Code + salesforce DX进行操作。那么Visual Studio Code + salesforce DX如何实现salesforce开发，主要有以下几个步骤。

PreRequirement

1. Enable Dev Hub：通过下面截图可以看出来，Enable Dev Hub有以下的好处：

• 可以通过command line去创建和管理 scratch org;
• 可以在请求过的scratch org中查看相关信息，包括他们是否active、delete、expired；
• 当使用带有命名空间的scratch org 的Dev Hub情况下，你可以关联namespace org到此 Dev Hub.

当你使用的是trail或者开发版本的org，需要考虑以下点：

• 每天最多可以创建6个stratch org,其中最多可以有3个active状态的stratch org;
• 你可以在开发版本的org定义一个命名空间如果这个开发版本org不是你的Dev Hub，你也可以在在开发环境启用Dev Hub如果这个开发版本org不包含namespace

 当我们启用了Dev Hub就意味着我们可以通过stratch org进行开发，因为项目开发很少是一个人独立完成的，会有一个团队成员去进行开发。系统管理员这个profile默认可以访问Dev Hub从而创建stratch org，针对非system admin的账号，我们可以通过创建permission set并assign给指定用户从而允许他访问Dev Hub并创建stratch org. 创建Permission Set需要有以下配置信息：

• Object Settings > Scratch Org Infos > Read, Create, Edit, and Delete
• Object Settings > Active Scratch Orgs > Read, Edit, and Delete
•  Object Settings > Namespace Registries > Read

如果想在Dev Hub中使用second-generation包，则还需要下面的配置：

• System Permissions > Create and Update Second-Generation Packages

这个配置可以让我们在CLI Command里面访问：force:package:create / force:package:version:create / force:package:version:update

一. 下载安装CLI(windows64为例)

 CLI全称为 Command Line Interface，用于控制Salesforce应用程序的整个应用程序生命周期。使用它，可以轻松地针对开发和测试创建环境，在你的scratch org和VCS(Version Control System，此处推荐GitHub)之间同步源代码，并执行测试。下载地址为： https://sfdc.co/sfdx_cli_win64 

下载后按照步骤安装，可以用command来测试是否成功。输入sfdx，如果显示以下内容则安装成功。

salesforcedx插件在version45.5.0及以前需要需要 Salesforce CLI v6, 在version45.8.0及以后需要Salesforce CLI v7及以后。当我们安装CLI时，默认系统会安装最新的salesforcedx的插件，我们如果想要知道当前当前我们安装的CLI 版本以及对应的插件版本情况下，我们可以在command line里面执行sfdx plugins --core便可以看到。如果我们想要安装指定的版本的插件，我们可以运行sfdx plugins:install someversion，比如安装45.8.0我们就可以写：sfdx plugins:install salesforcedx@45.8.0

如果想要安装最新的salesforcedx CLI 版本，执行sfdx update即可

 

 想要了解更多的Command命令可以参看：https://resources.docs.salesforce.com/220/latest/en-us/sfdc/pdf/sfdx_cli_reference.pdf

使用CLI进行salesforce DX开发主要有以下步骤：

1. 在本地创建一个 salesforce DX Project

有三种方式可以创建salesforce DX project，取决于你项目如何开始。

1) 通过VCS(此处为GitHub)创建一个salesforce DX project：官方提供了一个sample的git地址：git clone https://github.com/forcedotcom/sfdx-simple.git，先在电脑里面安装git的安装包，安装以后命令行中执行此内容则会在目录下生成sfdx-simple文件目录。git for windows地址如下：https://gitforwindows.org/

生成的目录格式如下，文件中的各个含义后续会讲。

2）创建一个全新的salesforce DX project:主要分成两步实现

　　-->1：切换到想要存储这个新的salesforce DX项目的路径，这里以My_Standard_DX目录为例

 　   -->2：使用sfdx中的指令force:project:create指令去创建一个新的salesforce DX,指令中会生成两种类型的salesforce DX 项目对应的文件目录，两个值 ： template empty/ template standard

empty 写法如下：sfdx force:project:create --projectname sampleDXProject --template empty <==> sfdx force:project:create -- projectname sampleDXProject
template empty会生成以下的文件：

• config/project-scratch-def.json：Scratch Org配置文件，当Scratch Org创建时，会以这个作为模板进行配置。
• .forceignore：当进行convert操作时，cli会忽略'.'开头的文件，想要在convert时排除更多文件，可以在此文件中进行配置；当进行scratch org以及project之间同步时，可以在此文件中配置不想同步的component。
• README.md
• sfdx-project.json：标识了此项目是一个salesforce DX项目，配置文件中包含了项目的信息以及便于scratch org进行身份认证和二次生成包的创建，也告诉了当在project和scratch org之间同步时，CLI在哪里放文件。
• force-app/main/default/aura
• force-app/main/default/lwc

其中，force-app用来放lightning中aura以及lwc的文件的，默认名称为force-app，如果我们想更改这个目录名称，可以default package名字：
例如，将这个而修改成 sfdx_package sfdx force:project:create --projectname sampleDXProject --defaultpackagedir sfdx_package

standard写法如下：sfdx force:project:create --project sampleDXProject1 --template standard

template standard 除了empty文件以外还会生成以下文件：

• gitignore ： 针对使用Git实现 VCS 更容易
• prettierrc and .prettierignore: 针对Aura component会更漂亮的格式化
• .vscode/extensions.json: 当visual studio code启动时，会针对你的项目建议你安装相关的扩展插件
• .vscode/launch.json: 配置Replay Debugger，使它更容易发现和使用
• .vscode/settings.json: 默认的情况下，这个文件有一个设置，用于保存操作时push或者deploy，默认值是false，可以在文件中改变值或者增加配置

这个默认也会生成force-app目录，如果想要修改的话，可以使用 defaultpackagedir在 template standard后面

3) 在已有的项目上创建salesforce DX project.当我们项目中已经有一些代码了，想要使用salesforce DX，需要先将source code处理到本地并且转化成source format格式。这里常见有两种方式的对已经存在项目中的metadata源进行处理。

　　-->1 针对managed package进行检索metadata源：

　　这里我们在dev环境创建了一个package名字为 TestPackage，里面放了一个App的component，我们可以通过以下的命令行来将metadata源导入到本地

　　首先在本地创建目录用来作为salesforce DX project的目录，这里demo用mdapipkg：mkdir mdapipkg

　　最后使用sfdx force:mdapi:retrieve -s -r ./mdapipkg -u <username> -p <package name> 指令来导入metadata源到本地。其中username为你的这个package对应的org的username，package name对应的是managed package的包名，如果包名包括空格，则使用''放在里面

生成的文件是zip文件，我们只要解压到本地文件夹，然后删除zip文件即可。

 　　-->2：针对package.xml这种Manifest文件进行解析：我们使用sublime或者使用eclipse时，当我们download源代码时，会根据package.xml里面的内容进行检索以及down到本地，如果针对package.xml不知道如何组成的以及里面的配置信息写的，可以移步：https://developer.salesforce.com/docs/atlas.en-us.220.0.api_meta.meta/api_meta/manifest_samples.htm。我们在demo中将 package放在salesforce_dx_with_package目录下，可以使用以下的命令行通过metadata 将 metadata 源检索到本地：sfdx force:mdapi:retrieve -r ./mdapipkg -u <username> -k ./package.xml 。其中username对应的是你这个xml对应的环境的username，后者package.xml建议使用绝对路径。

 2. Dev Hub Authorization

我们最终的进行开发是在scratch环境进行，当我们在本地环境创建好salesforce DX项目以后，需要先通过Dev Hub授权以后才可以创建以及管理Scratch Org。Dev Hub授权可以有多种方式，这里使用基于Web-Base Flow实现。需要注意的是，你只能授权一个org一次，当我们在开发中需要进行org之间的切换，我们需要为这个org指定用户名，可以通过--targetusername 或者--targetdevhubusername来设置一个默认的username或者别名。在授权以前，我们需要一个 connected app,salesforce默认提供了一个connected app进行使用，如果需要更多的安全相关的控制比如IP range等，可以自己创建connected app设置权限，感兴趣的可以自行查看，这里使用默认的方式进行授权。

我们可以使用sfdx force:auth:web:login命令行来实现授权登陆，如果你授权的是一个Dev Hub org，可以setdefaultdevhubusername来设置当前的Dev Hub为你的默认的环境，比如：sfdx force:auth:web:login --setdefaultdevhubusername --setalias my-hub-org。需要注意的是，setdefaultdevhubusername只能用于授权Dev Hub org，针对sandbox，不可以使用此parameter。当输入完指令回车以后，会跳转salesforce登陆页面，输入dev hub org的账号密码后，便会授权成功。

通过下面的截图可以看到，我们目前有两个连接的dev hub环境，下面的有D的标识意思为Default dev hub，并且别名修改成了 my-hub-org。

 当然，我们也可以基于安全性对dev hub进行取消授权，使用force:auth:logout标签即可取消授权。

 3. Scratch Org创建，配置、source data的push/pull以及登陆

前面也多次提到了Scratch Org，因为DX是基于source-driven的设计，所以Scratch Org我们可以按照英文翻译理解，用后就可以扔掉的org。当我们授权了Dev Hub以后，我们便可以进行Scratch Org的创建。不同的开发人员可能会针对不同的开发需求，所以Scratch Org是完全的可配置的，针对不同的Scratch Org可以允许开发人员有不同的配置特性配置文件。如果在开发过程中，团队成员的Scratch Org配置相同，我们可以在配置好一个配置文件以后share给团队成员即可。

 配置

当我们使用CLI命令行时，我们可以任意命名作为Scratch Org的配置文件，当我们使用Visual Studio Code时，会在config目录下生成一个后缀为scratch-def.json的文件。为了统一以及方便，建议不管使用CLI还是Visual Studio Code都以scratch-def.json这种方式命名。Scratch Org在salesforce中有一个标准的object对应，我们配置此文件也是基于里面的一些标准字段进行配置。如果项目中要求有一些特殊的配置，我们也可以在这个表中新建字段，然后配置在配置文件中。

下面的demo为官方给的一个配置文件的sample

{
"orgName": "Acme",
"edition": "Enterprise",
"features": ["Communities", "ServiceCloud", "Chatbot"],
"settings": {
"orgPreferenceSettings": {
"networksEnabled": true,
"s1DesktopEnabled": true,
"s1EncryptedStoragePref2": false
},
"omniChannelSettings": {
"enableOmniChannel": true
},
"caseSettings": {
"systemUserEmail": "support@acme.com"
}
}
}

这里的配置信息可以很灵活，想要了解这些字段的配置信息以及可以选择哪些赋值，可以自行参看文档。

创建

 使用CLI方式创建一个scratch org需要使用force:org:create指令，他有很多参数可以选择，这里我们使用通过读取scratch-def.json方式创建，demo如下：

sfdx force:org:create -f config/project-scratch-def.json --setalias my-sample-scratch-org --setdefaultusername

 其中 -f指定当前的配置文件的路径， setalias为设置当前scratch org的别名, --setdefaultusername为设置当前的scratch org为默认的scratch org，其他的我们也可以设置当前这个scratch org的可以active的时间，设置是否拥有namespace等等。以下截图内容为在sfdx-simple目录的config下有配置文件，通过读取这个配置文件生成scratch org的demo。

 登陆

针对一个dev hub可能有多个Scratch Org，从上面截图也可以看出目前系统有两个Scratch Org，那么我如何访问指定的一个scratch org，这个时候需要用到force:org:open的命令行，该命令行中的param没有required的项，想要了解更多的param自行查看文档，我们这里只需要设置 -u的命令符，后面跟着username或者alias即可打开某个固定的Scratch Org环境。

 Push source 到 Scratch Org

当我们在本地修改了某些东西后，我们需要将这些改动同步到Scratch Org中，我们需要进行push操作，对应的CLI命令行为force:source:push。需要注意一点的是，这个命令行只适用于本地project到Scratch Org的同步，如果我们希望不同的org或者不同的sandbox迁移，需要使用metadata api去实现。

正常情况下，push操作会将所有的metadata都同步到Scratch Org，如果我们希望filter掉相关的配置信息，我们需要在.forceignore文件中配置不想同步的项。当我们不加参数只运行force:source:push，我们默认的是project到默认的Scratch Org，如果我们希望同步代码在Project到指定的scratch org，需要添加 -u 这个参数。push操作可以设置很多功能，比如如何调用到.forceignore文件去过滤同步的文件等等，感兴趣的自行查看文档。

 Pull Source从Scratch Org到本地Project

当我们在创建好Scratch Org，创建好本地环境以后，需要进行将Scratch Org到本地Project的同步，然后开发人员便会本地进行开发。我们可以使用force:source:pull命令行将Scratch Org环境里面的metadata同步到本地project。此命令行只能用于scratch org，如果你想同步source到其他的org。需要使用metadata api(force:mdapi:retrieve/force:mdapi:deploy)。部署以前，我们可以通过force:source:status来看我们哪些source有改动。更多功能自行查看文档。Demo中我将DemoController修改并且进行部署。

 

CLI内容只说这么多，还有很多地方没有涉及到，比如怎么在scratch org新建用户，新建component, retrieve 以及deploy(这两个经常用到，需要自己慢慢看)等等。感兴趣的可以自行查看文档进行深入学习。

二. 下载安装Visual Studio Code并且安装相关扩展包

去官网下载Visual Studio Code：https://code.visualstudio.com/， 下载好以后正常安装打开即可。打开welcome页面，可以看到visual studio code针对主要的几个按钮以及操作设置的快捷键，这几个按钮操作我们后期会经常用到。

 

三. 安装必要的扩展包

点击左侧的Extensions，搜索区域搜索 'Salesforce Extension Pack'选中安装即可。这个包里面整合了很多salesforce常用的工具包，我们可以看到常用的有apex/ visualforce/aura，因为这个整合的包里面没有支持的lightning web component的包，所以最好我们在安装一下用于LWC开发的扩展包，此处搜索‘Lightning Web Components’安装即可。

 

 以上准备工作做好以后，便可以使用 Visual Studio Code进行salesforce的开发。上面的命令行我们实现的只是本地project与scratch org的交互，但是没有涉及到scratch org/project与DevHub的交互。下面的Visual Studio Code简单的介绍一下project与Dev Hub的交互。因为需要学的操作步骤太多了，所以这里不写太多的细节，深入理解可以参看：Salesforce Extensions for Visual Studio Code 

通常开发步骤如下：

 1. 创建Salesforce DX Project:  windows/linux 使用 ctrl + shift + p 快捷键打开 commands,mac是command + shift + p，以下以windows讲。输入 sfdx: Create Project，选中后，输入Project名称，这里Demo输入的是'My Dev Edition Project'，然后选择要生成的文件夹点击‘Create Project’。

2. Authorize an Org: 当我们创建完项目以后，我们需要将这个Project绑定我们的一个环境中，ctrl + shift + p 打开commands，输入sfdx: Authroize an Org，选择Project Default后输入Org 别名，然后系统会通过默认浏览器跳转，输入你想要授权的salesforce环境的账号密码，登陆后VS Code便会有类似授权成功的标识。

 3. 授权完以后我们可以创建相关的component，这里我们创建一个apex class，然后名字起名为Test Class。这里我们ctrl + P,输入sfdx:create apex class，输入指定名字，选择默认的路径即可。

4. 在本地更改完以后，可以通过sfdx:deploy操作，便可以将此类部署到DevHub上了。

 总结：篇中只是以简单方式做了CLI以及Visual Studio Code使用DX的demo，其中针对CLI没有涉及到如何部署到Dev Hub以及创建component等等。针对Visual Studio Code没有涉及到和Scratch Org进行交互。感兴趣的小伙伴可以查看这两个部分对应的官方文档。此篇也是边学边写，内容可能有错误的地方，如果有错误的地方欢迎指出，有不懂的欢迎留言。也感谢学这块技术时，学习群的各位大神的帮助。