Salesforce LWC學習(一)Salesforce DX配置

zero.zhang發表於2019-06-13

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

相關文章