從黑客日到遷移:這一切是如何開始的
說起來很有趣，但我最終幾乎是偶然地從事了RequireJS棄用項目。我在Braze Engineering的消息和自動化團隊工作了大約18個月，這個團隊專注於優化我們核心產品的後端消息發送管道。在某個時候，我問了另一個團隊成員前端是如何工作的——雖然他有一個模糊的概念，但他不清楚確切的細節。
這讓我很好奇;我真的很想了解我們的儀表盤是如何工作的。由於Braze舉辦黑客日，允許員工從事激情項目，我決定利用下一個黑客日，通過繪製和記錄前端代碼來探索我們儀表板的來來去去。大約在同一時間，Braze儀表盤團隊一直在考慮從RequireJS轉換到Webpack，這被認為是一項重大任務。但是在我的探索過程中，我開始看到了一條前進的道路，我認為可以幫助儀表板團隊自動化升級支持Braze平台前端的軟件所涉及的一些工作。
但是要全麵了解我們希望改變什麼，以及為什麼我對它如此興奮，你必須理解RequireJS和Webpack之間的區別。
Braze Dashboard的進化:RequireJS vs. Webpack
那麼，Braze的儀表盤到底是什麼?在最基本的級別上，它是一個單頁JavaScript應用程序。當營銷人員訪問Braze網站並登錄到我們的平台時，他們收到的網頁視圖通常是由儀表板代碼的捆綁版本通知的。這個包收集了用於生產的不同文件，有幾個不同的優化應用於它們，幫助儀表板更有效地運行，包括:
縮小，以允許它加載更快
自動代碼修改，讓儀表板適應不同的web瀏覽器
代碼分割允許前端代碼按需加載
在Braze，我們的JavaScript代碼的資產捆綁過程最初是由RequireJS支持的，RequireJS是一個為web使用設計的JavaScript文件和模塊加載器。但是隨著時間的推移，Braze產品和工程組織達成了共識，我們需要改進為儀表板捆綁代碼的方式。
最大的激勵因素是需要加快構建過程。每當開發人員想要驗證他們對一段代碼所做的更改時，他們通常都需要經過構建過程，以確保他們的調整以他們預期的方式影響軟件。一旦發現webpack(一個開源JavaScript模塊打包器)可以比RequireJS更快速有效地執行這些複雜的構建，我們就知道是時候做出轉換了。
特別是，我們認為做出改變將有三個關鍵的好處:
1.統一的代碼庫
在這一點上，儀表板的前端基本上分為兩部分，其中一半寫入CoffeeScript並使用RequireJS構建，而另一個是用JavaScript編寫的打印稿並使用Webpack構建。正如您所期望的，跨界共享代碼是一個問題，在很多情況下，需要一些非常脆弱的hack才能使其全部工作。因此，將工作遷移到單一流程的一個主要好處是，它提供了一個真正統一(並現代化)代碼庫的絕佳機會。
2.更短的反饋周期
正如我上麵提到的，與這個項目相關的一個重要優先事項是為在儀表板上工作的工程師找到縮短反饋周期的方法。當時，如果您對前端代碼進行了修改，使用RequireJS進行捆綁的過程平均需要3分鍾，有時甚至需要8分鍾。對於工程師來說，要想知道他們的代碼是否運行正常，等待的時間太長了。使用Webpack，初始啟動時間約為90秒，但每一個額外的更改都可以顯著地更快地執行，允許工程師更好地利用他們的時間並完成更多的工作。
3.更有效的故障排除
發現和解決代碼錯誤是任何工程團隊工作的重要組成部分。在Braze，我們使用一種叫做哨兵當問題出現在生產儀表板中時，這有助於組織和跟蹤問題的根源。但是因為代碼是用RequireJS構建的CoffeeScript，當它被編譯和縮小時，像“navigateToPill”這樣的函數的描述性名稱將被重命名為“a”之類的東西。反過來，這意味著我們將在第一行20萬列的“a”中看到一個類型錯誤——正如您可以想象的那樣，確定錯誤的來源需要做大量工作。另一方麵，Webpack有一個工具叫做源地圖這使得團隊可以使用最小化的代碼，並將給定的列和行映射到源文件;這意味著你會得到哨兵報告，說“navigateToPill”在特定的行上有一個錯誤，使它更容易更快地解決問題。
遷移過程:從RequireJS遷移到Webpack
從RequireJS轉換到Webpack的必要性是顯而易見的，但是這項工作的規模意味著他們預計這個過程至少需要一年的時間，並且涉及很多複雜性和工程帶寬來實現。當時的想法是，我們將不得不係統地逐節地檢查代碼基礎，並手動遷移所有內容，這將非常繁重。
我的突破(如果你想這麼說的話)是意識到我可以編寫能夠通過自動化過程批量修改Braze儀表板代碼的代碼，如果我們需要快速回滾這些更改，還可以不修改我們的代碼。在我的hack day項目之後，我做了一個概念驗證，隻是為了證明它是可行的，然後在我的業餘時間繼續做這個項目，這是一個充滿激情的項目。
也就是說，直到Braze Dashboard團隊的高級軟件工程師Greg beaver參與進來，事情才真正開始發展。他能夠把我寫的腳本作為概念驗證的一部分，並把它們整合到一個工具中，我們可以與其他工程師分享。反過來，這意味著我們可以從RequireJS遷移到Webpack，而不必強迫所有從事與儀表板相關代碼的工程師在我們遷移時停下來;相反，他們能夠使用該工具自動將他們正在處理的任何代碼與整體更改同步。
這個工具最終非常快——隻需要大約兩分鍾就可以運行——而且工作得非常好，以至於當我們為遷移做準備時，我們實際上有一個工程師利用它來解決與RequireJS相關的緩慢構建。他們隻是將他們的分支轉換到Webpack，做了他們需要做的更改，然後將其轉換回來，以便他們可以在舊代碼中提交它。
有了這個新功能，我們的遷移計劃是連續幾周每天晚上在我們的主分支上運行Greg的工具，並讓人們在該分支的QA環境中手動檢查，隻是為了看看是否有什麼損壞。一旦我們確信一切看起來都很好，我們就向組織的其他成員簡要介紹了計劃中的更新，向他們介紹了如何將代碼從RequireJS遷移到Webpack，並在開始之前提醒了他們一些關鍵的注意事項。
由於我們的方法，一個預計需要一年多時間的項目在短短三周內就完成了，這是非常不可思議的。更出乎意料的是遷移的影響——特別是，Webpack上的構建過程現在通常隻需要大約一秒鍾，將每次代碼檢查所需的時間減少了99%以上。
在Braze，我們致力於營造一個環境，讓像Guerra這樣的個人能夠充分發揮他們獨特的觀點和才能。你是那種想要突破界限，重新想象可能性的人嗎?查看我們的職業頁麵了解更多我們的空缺職位。
亞曆克斯Guerra
Alex在Braze消息傳遞和自動化團隊工作，使Canvas前端體驗光滑。他也是素食主義者，他本來不打算告訴你的，但它是有機的!
