摘要:后來經(jīng)過排查你會發(fā)現(xiàn)是由于目前還沒有版本。可以使用該方式解決。這就是我為什么不推薦你使用創(chuàng)建腳手架的原因此文的受眾是想要進(jìn)階中級的初級前端人員。
最近在知乎看到一個問題,原問題如下:
“ 很奇怪,為什么現(xiàn)在能找到自己手動創(chuàng)建vue腳手架的文章非常少,而且大家似乎對webpack4的熱情并不高,對于想基于vue2.0+webpack4搭建一個腳手架的我來說資料真是少得可憐。難道現(xiàn)在一般的做法就是直接從vue-cli開始然后改成自己需要的模樣嗎?難道就沒有人從零開始搭建一個漸進(jìn)增強(qiáng)的腳手架?這一點(diǎn)我很疑惑,希望大牛給點(diǎn)指導(dǎo)。”
這個問題我之前在公司也曾想過,當(dāng)初入門vue項(xiàng)目也是從一個 npm install vue-cli -g 的命令行開始的,覺得官方提供的vue-cli腳手架很友好,不用想vue+webpack的工作流怎么搭建,vue-loader 和 css-module怎么配置,如何安裝使用eslint和editorconfig等,就可以直接進(jìn)入業(yè)務(wù)代碼的開發(fā)階段。
當(dāng)然,以上是對于寫業(yè)務(wù)代碼的前端一線編碼人員來說的,對于追求上進(jìn)的你當(dāng)然不滿足于一直寫業(yè)務(wù)代碼,你也想知道一個項(xiàng)目在破土動工前,前端leader是怎么搭建一個前端項(xiàng)目的工作流的,如何去手動配置一個具體項(xiàng)目的webpack打包文件,包括后期的SSR,服務(wù)端渲染。
這些都是你提升自己內(nèi)功的砝碼,也是初級前端和中級前端的區(qū)別所在,初級前端只會在leader安排下的一個模塊里寫點(diǎn)業(yè)務(wù)代碼而不用去管前端工程的問題,這些問題都被前端leader搞定了,你只需調(diào)用他寫好的命令或者插件即可。
中級前端或者更進(jìn)階者就有統(tǒng)籌全局的能力,類似于文章開頭說的,能手動創(chuàng)建一個和公司項(xiàng)目需求深度定制的vue腳手架,而不再依賴于官方提供的vue-cli,一方面自己定制的腳手架哪出了問題自己心里清楚,從而也能培養(yǎng)自己前端架構(gòu)的能力,另一方面這也是月薪10K與20K的技術(shù)差距。
當(dāng)然,如果你直接使用了vue-cli,你的領(lǐng)導(dǎo)要求你將webpack的版本從3升級到最新的大版本4,你會不會一臉懵逼呢?舉個例子:
在webpack4.0中,如何使用extract-text-webpack-plugin配置css多帶帶分離打包,以及如何解決在升級過程中碰到的一些坑?如果你沒有親手升級過webpack4,你根本不會發(fā)現(xiàn)這些問題,例如extract-text-webpack-plugin的報(bào)錯:
(node:12712) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead E:***myprojectwebpack-vue-elementUi ode_moduleswebpacklibChunk.js:460 throw new Error( ^ Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead at Chunk.get (E:***myprojectwebpack-vue-elementUi ode_moduleswebpacklibChunk.js:460:9) at E:***myprojectwebpack-vue-elementUi ode_modulesextract-text-webpack-plugindistindex.js:176:48 at Array.forEach () at E:***myprojectwebpack-vue-elementUi ode_modulesextract-text-webpack-plugindistindex.js:171:18
這個問題的解決方式你在百度上暫時還搜不到答案,只能是依靠平時閱讀官方文檔、技術(shù)社區(qū)等尋找解決之道。
后來經(jīng)過排查你會發(fā)現(xiàn)是由于extract-text-webpack-plugin目前還沒有webpack4版本。可以使用該方式npm install extract-text-webpack-plugin@next解決。
這就是硬實(shí)力的一種體現(xiàn),在公司里技術(shù)的高低,體現(xiàn)于公司項(xiàng)目中碰到的難以解決的bug的解決能力。你可以看看平時在公司里誰解決的bug多,一般不是太難的bug都是前端小組的成員去解決,比較難的bug大多數(shù)情況下是前端小組的leader去解決的。
這種硬實(shí)力的體現(xiàn),折射出他為何是leader,你為何是被管理者,同樣的崗位,放你上去,你不一定能解決掉項(xiàng)目中碰到的問題,而他能。所以,童鞋們,人家之所以是leader,是因?yàn)槿思矣懈吣阋换I的技能,而這恰恰是你現(xiàn)階段所缺少的。
俗話說,不想當(dāng)leader的程序猿不是好碼農(nóng)。所以,平時你們可以在公司里看看你們的leader在忙些什么。
這就是我為什么不推薦你使用vue-cli創(chuàng)建腳手架的原因(此文的受眾是想要進(jìn)階中級的初級前端人員)。
接下來,我會分章節(jié)手把手教大家如何從零開始一個vue+webpack前端工程工作流的搭建,以及SSR服務(wù)端渲染。文章預(yù)告如下:
一個正式項(xiàng)目的目錄結(jié)構(gòu)是怎么形成的
vue-loader是如何配置的
淺談css-module配置
安裝使用eslint檢查的小技巧
如何在前端項(xiàng)目中配置editorconfig以及precommit
......
怎么用createRenderer的方式進(jìn)行服務(wù)端渲染
正式環(huán)境打包以及異步模塊打包優(yōu)化
以上內(nèi)容均會第一時間發(fā)布在我的公眾號:閏土大叔 ,歡迎關(guān)注。文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/94099.html
摘要:可以使用或來安裝我用來重新嘗試一次對速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行,可以寫成可以寫成看到這個畫面,安裝完成了。 初步搭建腳手架 Tips 任何不錯的開源項(xiàng)目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架 我通常使用 cli 生成項(xiàng)目骨架再在之基礎(chǔ)上進(jìn)行個人修改。 什么是 CLI 命令行界面(英語:command-li...
摘要:可以使用或來安裝我用來重新嘗試一次對速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行,可以寫成可以寫成看到這個畫面,安裝完成了。 初步搭建腳手架 Tips 任何不錯的開源項(xiàng)目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架 我通常使用 cli 生成項(xiàng)目骨架再在之基礎(chǔ)上進(jìn)行個人修改。 什么是 CLI 命令行界面(英語:command-li...
摘要:哪吒別人的看法都是狗屁,你是誰只有你自己說了才算,這是爹教我的道理。哪吒去他個鳥命我命由我,不由天是魔是仙,我自己決定哪吒白白搭上一條人命,你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運(yùn),我不曉得。我只曉得,不認(rèn)命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...
摘要:然而,這些模板并不限制你自己對于使用的架構(gòu)組織和選擇類庫。目前可用的模板包括全功能的,包括熱加載,靜態(tài)檢測,單元測試一個簡易的,以便于快速開始。 最近, 尤大在和人對噴的時候,悄然放出了一個大招,于是為了追趕他的步伐,趕緊試驗(yàn)了下,并且把原文給大家翻譯下。 原文地址:Announcing vue-cli 譯文源地址: Vuejs自己的構(gòu)建工具 先上原文翻譯: 最近有很多大量關(guān)于Reac...
摘要:借助,我們通過非常簡單的問答形式,方便地初始化一個工程,完全不需要擔(dān)心繁復(fù)的配置等等。簡單來說,就是不僅僅能初始化工程,理論上能夠初始化一切工程,包括,等等等等,只要你有一份能夠運(yùn)行的模板,就能夠通過進(jìn)行工程的初始化。 相信對于大部分使用過VueJS的同學(xué)來說,vue-cli是他們非常熟悉的一個工具。借助vue-cli,我們通過非常簡單的問答形式,方便地初始化一個vue工程,完全不需要...
閱讀 1020·2021-11-22 13:52
閱讀 1452·2021-11-19 09:40
閱讀 3190·2021-11-16 11:44
閱讀 1280·2021-11-15 11:39
閱讀 3917·2021-10-08 10:04
閱讀 5376·2021-09-22 14:57
閱讀 3109·2021-09-10 10:50
閱讀 3193·2021-08-17 10:13