當前位置:
首頁 > 知識 > 用 npm script 打造超溜的前端工作流

用 npm script 打造超溜的前端工作流

互聯網大潮和前端社區的蓬勃發展讓現代前端項目的複雜性比 5 年前翻了好多倍,前端工作流中也出現了越來越多工程化的環節,比如代碼風格檢查、自動化測試、自動化構建、自動化部署、服務監控、依賴管理等。

大多數前端工程師的工作流可能都離不開 gulp、grunt、webpack 這樣的重量級構建工具,而是否能熟練運用這些工具將重複任務自動化也是工程師素質的重要體現,我本人也是這些自動化工具的忠實粉絲,因為它們確實能幫我解決問題。但幾番折騰之後,你可能已經像我一樣感受到明顯的痛點:比如對插件依賴嚴重(開發者的自由度受限),插件和底層工具文檔脫節,調試變的更複雜等。

相比而言,直接使用 npm 內置的 script 機制已經被無數開發者證明是更好的選擇,它能減輕甚至消除上面的痛點:你可以直接使用海量的 npm 包來完成你的任務、不需要在插件文檔和基礎工具文檔間來回切換,最重要的點,不使用 grunt 之類的構建工具能讓你的技術棧相對更簡單,而我在做技術選擇是遵循的基本原則是簡單化,簡單才有可能容易讓別人上手。

可能有同學會反問,,下面這張圖(出自這裡)是最好的證明:

那 npm script 為什麼沒有沒有在構建工具中成為主流呢?可能大多數人覺得使用 npm script 需要很強的命令行功底、或者它不夠強大、或者它不能跨平台。可以很負責任的說,社區發展到現在,上面的擔心都是多餘的。

這也是這本小冊的切入點,我在這本小冊中會用 講解如何使用 npm script 打造輕量級但完整的前端工作流。即使你是命令行小白,也能輕鬆跟上,小冊會以實際前端項目為底板逐步介紹更高階的話題。學完這本小冊,你將熟知使用 npm script 打造前端工作流要用的各種小工具和技巧。

小冊的內容劃分為 4 篇:

入門篇:創建和運行 npm script,熟悉和理解基本套路,分 3 小節;

進階篇:原來 npm script 還可以這樣用?分 3 小節;

高階篇:如何管理複雜的 npm script?分 3 小節;

實戰篇:如何用 npm script 來輔助前端工作流?分 5 小節;

此外,為了方便讀者上手實踐,我還為每個小節錄製的視頻教程,想了解我短視頻教程風格和質量的同學可以看我專欄的歷史文章:styled-components、async/await。

說句題外話,我的 zsh 命令行歷史中 npm 已經是僅次於 git 調用次數的命令了。


適合什麼群體?

擁抱 開發理念的工程師,不限前端;

感受到 grunt、gulp 之類工具的笨重和不便,想要更輕量級的解決方案;

想玩轉 npm script,不斷打磨自己硬技能,提高日常工作效率的同學;


你會學到什麼?

理解使用 npm script 的關鍵知識要點;

掌握 25 個 npm script 實戰技巧,章節雖少,但是每個章節都是濃縮的;

收穫使用 npm script 和各種小工具搞定各種前端工程自動化需求;

得到我長期積累和迭代出來的 npm script 集合,直接運用到項目中;


你要準備什麼?

Node.js 運行環境,最好是 v8.x 以上版本,建議使用 nvm 來安裝,Windows 下的用戶可以使用 nvm-windows;

可以用來輸入和執行命令的終端程序,比如 Mac 下的 iTerm,或者 Windows 下的 cmd;

1 小時的閑暇時間,讀完這本小冊,並能自己上手實踐,因為紙上得來終覺淺;


配套視頻目錄


關於作者

王仕軍,愛折騰、愛分享的前端老司機,6 年以上前端開發經驗,4 年大型互聯網公司工作經驗;掘金專欄作者;熟知(是的,到現在我還不敢說精通) 、,對開發效率和軟體質量有極致追求。目標是。


讀者福利

免費加入讀者交流群,和群友討論和交流讀書心得和疑惑問題;

免費獲得小冊視頻版教程,網盤下載地址已經附在小冊末尾;

最後如果你有興趣,可以通過長按下方的二維碼,以及複製好本公眾號專屬優惠碼(npm)享受7折優惠購買。

長按識別,並在優惠碼中輸入 npm


喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 JavaScript 的精彩文章:

Hi,你的10G大數據免費學習資料包到了,請簽收!

TAG:JavaScript |