前端工程研究 | The Will Will Web

The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

設定 Angular 專案使用 husky 簡化 Git hooks 設定並用 Prettier 統一風格

我們在團隊中開發 Angular 應用程式,經常需要同步每個成員的程式碼格式,與其訂定 Coding Style (代碼風格),倒不如直接用工具強制所有成員用一致的風格進行程式碼排版。本篇文章我將示範用 husky 搭配 prettier 來設定 Git 的 pre-commit hook,讓每個人在 git commit 之前就自動將變更的程式碼進行排版。

... 繼續閱讀 ...

前端工程研究:關於 JavaScript 的物件藍圖建立方法

我們都知道 JavaScript 物件建立的過程,大多都不需要事先設計「藍圖」就可以建立「物件」,不像 C#Java 等強型別語言,需要先設計「藍圖」(也就是類別),才能產生物件。在 ES2015 出來之前,並沒有 class 語法,而是使採用以原型為基礎的物件導向設計模式 (Prototype-based OO)。本篇文章將介紹幾種在 JavaScript 裡面建立物件藍圖的方式。

... 繼續閱讀 ...

網站如何開始使用 ES6 / ES2015 模組化技術進行前端開發

在 2019 的今天,還有多少人在使用傳統前端技術在開發 Web 應用程式?撇除市面上知名的 SPA 框架不說,就算你公司內部還在使用 jQuery 開發網頁,你依然可以將自己升級到使用現代化前端技術的前端工程師。今天這篇文章,將分享如何將現有傳統網站逐步升級,改用如 ES6 / ES2015 等語法,以及透過好用的模組打包工具(module bundler)將全新的 JS 語法轉譯為舊版瀏覽器也能執行的 JS 語法。

... 繼續閱讀 ...

公司找不到資深前端工程師可以導入前端框架嗎?

我有很多客戶都跟我提過這個問題:「我公司想導入前端框架,不過公司內沒有人熟前端,很怕如果遇到技術問題會卡關,做不出想要的功能怎麼辦?」公司內沒有資深的前端工程師,導入前端框架確實是件痛苦的事,本篇文章將探討我對這個議題的想法與對策。

... 繼續閱讀 ...

2018 企業前端框架趨勢論壇之問答回應 (完整版)

我們今年在 2018/9/15 舉辦了一場「企業前端框架趨勢論壇」活動,現場來了將近 200 人,可見許多人對前框架的發展相當感興趣。由於是我們第一次舉辦大型活動,我發現整體活動安排得不是很理想,尤其是最後專家座談的部分,留給會眾提問的時間太少了,這點我們一定會在日後的活動中改進。本篇文章,我打算回答線上提問的所有問題,幫助大家釐清疑惑。

... 繼續閱讀 ...

前端工程研究:如何在企業內部使用「完全離線」的方式安裝 npm 套件

許多企業在設法導入前端工程的過程中,最大的進入障礙竟然是「無法使用 npm 安裝套件」。因為真的有很多企業在嚴格執行資訊安全政策的情況下,所有開發者都無法從公司內部環境連到 npm 網站下載套件。這篇文章,我將分享幾個小技巧,幫助企業開發人員可以在內部實現簡易的 npm 離線快取。

... 繼續閱讀 ...

前端工程研究:理解函式編程核心概念與如何進行 JavaScript 函式編程

函式編程 ( functional programming ) 在這幾年變得有點熱門,像是 React 這套 JavaScript 框架,如果想學好他,通常也都必須要先熟悉函式編程的開發方法才行。畢竟函式編程只是一種程式設計方法,只要程式語言本身可以符合函式編程的基本概念,就可以宣稱用函式編程來開發程式。今天這篇文章,就想以 JavaScript 程式語言為出發,帶大家理解 JavaScript 函式編程的魅力與重要的核心概念。

... 繼續閱讀 ...

前端工程研究:關於 JavaScript 中 Date 型別的常見地雷與建議作法

今天這篇文章,我想來談談 JavaScript 到底如何實作「日期字串」格式解析,日期時間有太多種表達方式,一般人在剛接觸日期格式的時候,都不會想太多跨瀏覽器的問題,通常都是遇到問題的時才來靠北瀏覽器有多爛多爛。有趣的是,有時候還會怪錯對象,例如 XXXX 框架好爛,我寫 JS 這麼久都沒遇過這問題,用了 XXXX 框架才遇到的。現在,我們就開始來對這個說常用不常用,用到時不熟悉的「日期」型別,話說從頭。

... 繼續閱讀 ...

如何解決在 Windows 用 npm 安裝 TypeScript 之後 tsc 還是舊版的問題

由於 Angular 2 官方建議採用 TypeScript 做為主要的開發語言,一般來說 TypeScript 都會建議使用 npm 進行安裝,安裝後就可以在命令提示字元下使用 tsc 命令對 *.ts 進行編譯動作。不過這幾年 TypeScript 的變化很快,轉眼都已經到 1.8 版了。雖然透過 npm 安裝 TypeScript 是很容易的一件事,不過對於有安裝過 Visual Studio 的使用者來說,這條路可能會變得異常崎嶇,如果你在用 npm 安裝過 TypeScript 並且輸入 tsc.exe -v 總是顯示 1.0 版 ( 或低於 1.8 版) 的話,這篇文章你可能要繼續看下去。

... 繼續閱讀 ...

我要成為前端工程師!給 JavaScript 新手的建議與學習資源整理

今年有越來越多企業開始跟我們接洽企業內訓的事,想請我幫他們培訓前端工程師,但你知道一個好的前端工程師絕對不是兩三個月可以養成的,需要多年的努力與磨練才會有點成績。而這幾年可謂前端正夯,有為數不少的人開始大規模的往前端開發移動,而我被問到最多的問題就是「請問 JavaScript 要怎麼學?」或「請問 JavaScript 該怎樣入門?」諸如此類的問題。大家都知道,對於一門程式技術來說,「會寫」與「會教」是兩個截然不同的領域,會寫 JavaScript 的人到處都是,但是會教的人就相對少很多了。我這幾年教授 JavaScript 開發實戰課程已經超過 15 梯次,在將近 500 位學員裡面,我所看到的大部分學員都是對 JavaScript 不勝理解,普遍處於一種一知半解、模糊不清的狀態。另一方面,我在公司內部也帶過不少工程師,總是有人會想學習 JavaScript 但不知道如何入門的情況,這讓我陷入深思,該如何幫助一個人學習 JavaScript 從入門到精通呢?本篇文章將說說我個人的一些想法與建議。

... 繼續閱讀 ...

關於 PATH 環境變數過長而導致命令提示字元下無法執行特定程式的問題

最近由於經常在研究前端常用的各式工具,像是 npm, bower, gulp, webpack, yo, git 等等的工具用的很多,因此親手打指令執行程式的機會變多了,然而有好長一段時間間斷地出現了一些靈異現象,我卻無法解釋,直到最近終於發現了一些潛在的地雷,身處 Windows 平台下的前端工程師們不得不注意。由於我最近迷上了 Cmder 工具,在使用這套工具時可以讓我在輸入指令時,就像身在 Linux 環境下一樣自在,功能很多、支援鍵盤快速鍵、還支援命令與參數自動完成,非常好用,不過有時候卻發現他有點不太靈光,明明已經裝好了 npm 或 bower 工具,就是無法正常執行,我開啟 Windows 內建的「命令提示字元」視窗卻又可以執行。但問題是並不是永遠都不能執行,因為有時候又可以正常執行。這完全是一個農曆七月鬼打牆的概念,我將用這篇文章來說明問題背後的原理與解決方法。

... 繼續閱讀 ...

如何在強制使用代理伺服器的環境下設定 git, npm, bower, gem, ionic 工具

有些公司會要求員工上網時必須設定代理伺服器 (Proxy Server) ,在這樣的環境下使用這些前端工具經常會遇到許多網路連線的問題,本篇文章將說明如何針對 git, npm, bower, gem, ionic 等工具進行完整的代理伺服器設定,設定好之後就可以大幅漸少這些奇奇怪怪的問題。

... 繼續閱讀 ...