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進行交互。感興趣的小夥伴能夠查看這兩個部分對應的官方文檔。此篇也是邊學邊寫，內容可能有錯誤的地方，若是有錯誤的地方歡迎指出，有不懂的歡迎留言。也感謝學這塊技術時，學習羣的各位大神的幫助。

原文出處：https://www.cnblogs.com/zero-zyq/p/10973679.html