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

 1 {
 2     "orgName": "Acme",
 3     "edition": "Enterprise",
 4     "features": ["Communities", "ServiceCloud", "Chatbot"],
 5     "settings": {
 6         "orgPreferenceSettings": {
 7             "networksEnabled": true,
 8             "s1DesktopEnabled": true,
 9             "s1EncryptedStoragePref2": false
10         },
11         "omniChannelSettings": {
12             "enableOmniChannel": true
13         },
14         "caseSettings": {
15             "systemUserEmail": "support@acme.com"
16         }
17     }
18 }

這裡的配置資訊可以很靈活，想要了解這些欄位的配置資訊以及可以選擇哪些賦值，可以自行參看文件。

建立

使用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進行互動。感興趣的小夥伴可以檢視這兩個部分對應的官方文件。此篇也是邊學邊寫，內容可能有錯誤的地方，如果有錯誤的地方歡迎指出，有不懂的歡迎留言。也感謝學這塊技術時，學習群的各位大神的幫助。

Salesforce LWC學習(一)Salesforce DX配置

相關文章