不會手寫vue-cli腳手架，leader竟要辭退我！

遙想當年，土哥入行之初，因為不會從零手寫一個適合公司專案vue-cli腳手架，差點被leader勸退。

還記得那個時候，我還是個工作沒幾年的前端新人，在公司搭建vue專案也是從一個npm install vue-cli -g的命令列開始的。

傻瓜式操作，幾條命令輕鬆搞定。

我覺得，官方提供的vue-cli腳手架很友好，不用想vue+webpack的工作流怎麼搭建，vue-loader 和 css-module怎麼配置，如何安裝使用eslint和editorconfig等，就可以直接進入業務程式碼的開發階段。

當時，我還是一個寫業務程式碼的前端一線搬磚工。

直到有一次，公司有新專案，leader讓我自己去搭建一個前端專案的工程，我一下傻眼了。

我承認，自己當時在前端工程化這方面功底比較差，之前這些在專案破土動工前的活兒，都是由leader親自操刀的。

前端太難了！我該怎麼辦？

還好，求生欲很強的我，厚著臉皮去請教了leader，事後還請leader吃了火鍋喝了酒。

經此事後，我開始不滿足於一直寫業務程式碼，我也想知道一個一個專案在破土動工前，前端leader是怎麼搭建一個前端專案的工作流的，如何去手動配置一個具體專案的webpack打包檔案，包括後期的SSR，服務端渲染。

那段「刨坑問底低頭鑽研」的日子，都成了我後來進階為leader的資本。

很多人一直嚷嚷著前端進階，我要摘掉初級前端的帽子，我要當leader... 殊不知，靜靜地擺在你編輯器裡面的專案程式碼，都是你提升自己內功的砝碼，也是初級前端和中級前端的區別所在。

來個靈魂拷問：你現在能給你們前端小組成員，從頭到尾講述清楚整個專案的來龍去脈，所用技術棧有哪些，以及各個工程目錄的關聯關係嗎？

初級前端只會在leader安排下的一個模組裡寫點業務程式碼，而不用去管前端工程的問題，這些問題都被前端leader搞定了，你只需呼叫他寫好的命令或者外掛即可。

中級前端或者更進階者就有統籌全域性的能力，類似於文章開頭說的，能手動建立一個和公司專案需求深度定製的vue腳手架，而不再依賴於官方提供的vue-cli，一方面自己定製的腳手架哪出了問題自己心裡清楚，從而也能培養自己前端架構的能力，另一方面這也是月薪10K與20K的技術差距。

當然，如果你平時都是直接套用vue-cli，而你的領導某一天要求你將webpack的版本從3升級到最新的大版本4，你會不會一臉懵逼呢？

舉個例子：在webpack4.0中，如何使用extract-text-webpack-plugin配置css單獨分離打包，以及如何解決在升級過程中碰到的一些坑？如果你沒有親手升級過webpack4，你根本不會發現這些問題，例如extract-text-webpack-plugin的報錯：

(node:12712) DeprecationWarning: Tapable.plugin is deprecated. 

Use new API on `.hooks` instead

 E:***myprojectwebpack-vue-elementUinode_moduleswebpacklibChunk.js:460

                    throw new Error(

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

        at Chunk.get (E:***myprojectwebpack-vue-

elementUinode_moduleswebpacklibChunk.js:460:9)

        at E:***myprojectwebpack-vue-elementUinode_modulesextract-text-webpack-plugindistindex.js:176:48

        at Array.forEach (<anonymous>)

        at E:***myprojectwebpack-vue-elementUinode_modulesextract-text-webpack-plugindistindex.js:171:18

這個問題的解決辦法，當時在百度上還搜不到答案，只能是依靠平時閱讀官方文件、技術社群等尋找解決之道。後來經過排查你會發現是由於extract-text-webpack-plugin目前還沒有webpack4版本。可以使用該方式npm install extract-text-webpack-plugin@next解決。

這就是硬實力的一種體現，在公司裡技術的高低，體現於公司專案中碰到的難以解決的bug的解決能力。

你可以看看平時在公司裡誰解決的bug多，一般不是太難的bug都是前端小組的成員去解決，比較難的bug大多數情況下是前端小組的leader去解決的。

這種硬實力的體現，折射出他為何是leader，你為何是被管理者，同樣的崗位，放你上去，你不一定能解決掉專案中碰到的問題，而他能。

所以，兄弟們，人家之所以是leader，是因為人家有高你一籌的技能，而這恰恰是你現階段所缺少的。

俗話說，不想當leader的搬磚工不是一個好司機。所以，土哥在這裡給你們留一個任務：觀察你們公司的leader，平時都在忙些什麼？

心理學上講，想成為什麼樣的人，你就要和什麼樣的人在一起，去觀察他，去向他學習，最後你便會成為像他那樣的人。

從零手寫一個vue-cli腳手架，是我前端路上的轉折點。