回顧 2018 年 | 掘金技術征文

前言

時光飛逝，我已經從大學畢業，成為前端工程師。雖然之前也寫過一篇回顧文章，但透過這一次掘金給予我的回顧機會，我重新找回了自己的初心，以及自己的方向。

前端日常

在日常開發中，我的工作是業務方向，以滿足内部使用者的需求為主，偶爾才會有寫一些面向外部使用者的網站。因而保持項目的穩定性和維護性是我的首要工作，是的，不需要很炫酷的技術，但需要很穩定的技術。

發現 Antd 彩蛋問題

在開發自己的部落格系統的時候，一直在想要不要把 Bootstrap 改為 Ant-design。

直到 2018年 9月的時候，我發現一個公共元件加入了一個聖誕彩蛋，也就是在 12月 25日的時候爆炸的那個問題。

說實話，當時我并沒有那麼注意到這個問題，隻是簡單的看了一下源碼，然後發現它直接推送到 master 分支上面，總感覺哪裡怪怪的。

是以我就在 V2EX 上面寫一個文章，然後就沒管它了，結果就是 Boom。

文章連結：www.v2ex.com/t/490917

學會調試源碼

雖然我很希望使用

ReactJS

作為我的主要技術，但是舊項目一直在用

regularJS

，以及一個元件庫

nek-ui

。因而我需要學會看這些文檔，以及文檔不一定有的暴露方法。。。

當我看見每個元件都有一大堆傳參，我就不斷地想，到底這個元件是怎樣用的？是不是真的能夠生效？ 因而我就開始慢慢地學習了如何使用

SourceGraph

看源碼。

上面截圖為 Sourcegraph 的一段 nek-ui 開源代碼。

看是不足夠的，是以我就利用 Google Chrome DevTools 調試源碼。

在調試的過程，我就發現舊時代的 JavaScript 私有方法是多麼的公開透明的。。。可以利用元件暴露的方法，繼承并改寫它來達到自己想要的效果。

參與技術大會

還記得這一年我參加了兩次 Node.js Party，以及谷歌開發者大會。

是的，我對于參加這些技術大會并不感到乏味。就算是要坐兩個小時公交過去西溪濕地，我也是願意參加 Node.js 派對的。

這次開發者大會裡面，我就認識了一些來自谷歌，掘金的優秀工程師，也是讓我有所收獲。

如果你有自動化測試應用的需求，那麼你可以嘗試使用 Puppeteer。

如果你有測試網站性能的需求，那麼你就可以使用 Lighthouse，它會生成性能報告，并提供可以改進的措施。

部落格介紹文章：calpa.me/2018/09/24/…

完成部落格系統腳手架

在編寫部落格文章的時候，我經常身兼三職，編寫部落格系統的前端程式員，專心寫文章的編輯，以及保證網站服務品質的網站維護者。

1. 前端工程師：我希望可以使用最新最快的技術，同時保證服務是穩定的，文章可以正常顯示。
2. 編輯：我在編寫文章的時候，我希望可以看到預覽的效果。
3. 網站維護者：網站有問題的時候，可以快速回退到正常的版本，避免線上事故繼續發生。 不僅如此，我也希望可以給校對者，對于每一個版本分别進行校對。

為了更好地實作這些目标，我選擇使用 GatsbyJS + Netlify + Contentful，來達到這件事情。

部落格介紹文章：calpa.me/2018/12/24/…

現在這個腳手架取得超過 150個 Star 數，可以說是有點超出我的預期（笑

Github 倉庫位址：github.com/calpa/gatsb…

雖然是這樣，但是還是有不少的問題。

下一步就是把 Contentful 的資料存取服務改為 Netlify CMS，充分使用 Github 剛剛提供的免費私有倉庫服務。

也是想降低使用者使用這個架構的成本吧。

工具類總結

Vue

在使用 computed 的時候，我發現原來它是可以使用 getter 和 setter 而不是單純的 getter 方法。

了解到 Vue 最基本的實作原理：

Object.defineProperty

，以及訂閱釋出模式。

Node.js

由于公司業務原因，我們使用 egg.js 來攔截，轉發，改寫請求，同時需要輸出報錯日志。

Babel

由于 async/await 的友善性，我就直接把它用到項目裡面，可是會有

regeneratorRuntime is not defined

的問題。我找到這一段代碼是和 Babel 轉譯相關，是以就開始了解 Babel 是如何轉譯的旅程，例如 async/await，class，extend。

calpa.me/2018/07/29/…

Webpack

由于要從零開始建構前端項目，是以需要對 webpack 進行一些配置。

我了解到 Webpack 原來由 loader 和 plugin 組成，Webpack 多環境配置的方法，以及如何輸出能讓程式員看指令行時感到比較友好的一些插件。

2019 年計劃

很感謝這一年幫助我從萌新階段成長的一衆程式員，也謝謝你們來到我的部落格閱讀文章，給予我繼續寫作的源動力。我會繼續編寫 GatsbyJS 的文章，以及探索移動端動效的方案。

在新的一年，我希望可以不單是解決業務問題，更加是希望以技術的手段，去解決一些重複性的工作。一方面是希望了解并落地：如何使用 GraphQL 節省 HTTP 接口，隻擷取隻需要資料的查詢方法。一方面是希望可以制作一些可配置的背景模闆，直接拖拉就可以擷取資料，無需前端手寫擷取字段。。。

後記

還記得參加谷歌開發者大會的時候，我是專門請假過去上海的，就算沒有兩天工資，但這些都是值得的。

想到這裡，我不禁想我到底是要走技術路線還是走業務路線。

不過，這個問題随着我寫這篇文章就開始有了定案。

來年還望各位多多指教。