前端web開發(fā)有哪些必不可少的工具？

時間：2023-12-01 18:18:01 | 來源：網(wǎng)站運營

時間：2023-12-01 18:18:01 來源：網(wǎng)站運營

前端web開發(fā)有哪些必不可少的工具？：關(guān)鍵是現(xiàn)在前端開發(fā)也不是鐵板一塊，那我就來分一分吧：

代碼編輯器統(tǒng)一用vsCode沒有意見吧？如果你要抬杠說你喜歡用vim，來，Vim鍵盤映射搞起。

靜態(tài)頁面（設(shè)計師）:

沒有瞧不起靜態(tài)頁面的意思，而是在這樣的場景下，一般需要前端工程師和設(shè)計緊密配合，所以一些設(shè)計工具諸如PhotoShop，Sketch的基礎(chǔ)操作還是應(yīng)該掌握的，當然只需要你去切切圖，導(dǎo)出資源文件。

靜態(tài)頁面大多會和瀏覽器兼容聯(lián)系在一起，瀏覽器兼容性檢測工具了解一下。至于modernizr等庫就不提了，主要講工具。

為了不做大量的重復(fù)的代碼復(fù)制粘貼工作，以及自動化處理代碼壓縮等臟活，parcel了解一下。幾乎零配置，而且直接就能運行看效果（全局安裝的不算庫，就是命令行工具）。

注意我說的靜態(tài)頁面指的是非SPA，可能這樣有點寬泛了，但是實際上這么說也對，因為即使你有ajax，大部分都是PHP等后端程序員來調(diào)試的。不過這并不影響你使用MVVM框架啊，Vue的大小很適合直接在頁面中嵌入，所以加上一個vue-devtool。

小型SPA（Vue）：

小型的SPA網(wǎng)站一般用Vue，這應(yīng)該是業(yè)界共識吧，沒有太多復(fù)雜的邏輯，Vue還能保證良好的體驗。至于什么是小型什么是大型呢？我認為本站這種體量的網(wǎng)站正好可以作為標準，因為本站拋棄AngularJS的原因也可以用在拋棄Vue上。

除了devtool以外，需要insominia定義和調(diào)試接口，Nginx的東西你先拿過來配置也可以，畢竟上了SPA，前后端邏輯分離，但是職能倒是模糊了。

要上PWA了？lighthouse了解一下。

大型SPA（Angular，React）:

大型應(yīng)用必上TypeScript，因此ts-node必備啊。

之前提到的接口調(diào)試，lighthouse也得跟上。

可能會引入中間件，因此mongo作為緩存和對象存儲，mariaDB作為部分業(yè)務(wù)數(shù)據(jù)存儲也得跟上。選擇mariaDB的原因是因為可以搭配Node的并發(fā)能力（sequelize依舊是唯一選擇，哎）。

相關(guān)測試工具類似karma，puppeteer，Jasmine ，phantom等也得跟上。

產(chǎn)品說要畫UML。

小型服務(wù)端渲染（nuxt）：

很有意思的是用nuxt可以保證良好的編程體驗，不太需要其他工具。對了，買一柱香，以nuxt的錯誤提示很多時候你得燒柱香，祈求能夠找到bug位置。

大型服務(wù)端渲染：

別人谷歌adword都不敢貿(mào)然上服務(wù)端渲染你湊什么熱鬧，大型服務(wù)端老老實實用JSP。

當然了，你說你有大無畏的探險家精神，好吧，Angular和React的SSR路線爬一爬。另外一個單線程的渲染實例肯定無法承載大量訪問的。

祝君幸福。

適配器模式應(yīng)用開發(fā)（ionic）：

別跟我說什么Appcan，phoneGap，老夫?qū)戇m配器模式，只用ionic。一是因為Angular可靠（如果他不天天更新的話），二是因為它完全接管了開發(fā)的方方面面。

畢竟是應(yīng)用開發(fā)，AndroidStudio，AndroidSDK，gradle，AVD，Xcode以及一臺mac，這些也是需要的。

最后cordova run一下。

橋接模式應(yīng)用開發(fā)（RN，NativeScript）：

寫出代碼來，就已經(jīng)需要一定的水平，至于調(diào)試那就比較耗費青春了。

有人說橋接模式開發(fā)更快，其實我想說適配器模式才是最快的。但是又有人說橋接模式性能好，我覺得適配器模式解決不了的性能問題橋接模式也解決不了。

大部分場景下二者并沒有差別（你要說你能憑肉眼觀察出v8的編譯過程就當我什么都沒說）。而在webGL下二者更不可能有太大差別。

也就是用不用原生按鈕，用不用原生手勢的問題（看著我的懵逼臉）。

但是如果你非要逆著WASM這種底層語言侵襲前端的潮流去搞前端轉(zhuǎn)向原生的工作，也不是不可。

需要的工具也和適配器模式一樣。

桌面應(yīng)用開發(fā)（electron）：

visual studio，xcode準備好，electron .完成，接下來的工作就是翻閱api手冊。

當然僅僅這些是不能讓你寫出vscode這樣的應(yīng)用來的。

企業(yè)級服務(wù)器：

使用egg.js終于可以開發(fā)企業(yè)級的服務(wù)器了，當然，如果你不是一個人寫代碼，并且代碼不想被新來的（薪水是你兩倍的）菜鳥弄亂，TypeScript還是必須的。

pm2用來管理服務(wù)以及自動部署。

git版本管理就不用說了。

數(shù)據(jù)庫任選，但是建議不要用orm2，sequelize吧。

剩下的時間好好研究hadoop和keras.js，這兩者和Node配合得很好（我碰了幾次，每次都是淺嘗輒止，非不為也，實不能也）。

你也可以用ramda，rx，zone防止別人隨便改你的代碼（殺敵一萬自損八千，小心自己看不懂）。

---

大概就是這么多，等你把這些開發(fā)工具和工作流都摸熟了，記得去醫(yī)院檢查一下頸椎。

另外不管你能力有多強，都別向后端程序猿炫耀。

"切，寫JS的垃圾"。