資訊專欄INFORMATION COLUMN
摘要：在這種背景下，誕生了很多工具很多前端工作流程。目前我們很多時候常說的前端工程師，其實主要指的就是其工程師。所以就是來解決這些問題的最后至此前端的一個工作結構介紹至此結束。
這個時代不懂點前端知識，真的沒有辦法生存。就算不會寫，也得了解它的原理吧！
最近做了一些總結，之前都是迷迷糊糊，搞不清楚前端之前的相關定位。好好梳理了一下。錯誤之處請各位指正。
本文主要說的是 JavaScript 工作流程
目前前端真的該叫大前端，其越來越細化，越來越復雜。在這種背景下，誕生了很多工具很多前端工作流程。比如熱門的：
react
vue
webpack
babel
gulp
node.js
npm
nvm
angular
bower
... ...
如果繼續寫，估計光這個，字數久能夠達到1000+
這里邊有的是前端js框架，有的是一些開發工具，但他們種類這么多，各自能夠解決什么問題？互相之間有什么聯系？是不是一個項目就必須用上這么多東西？使用時候，如何相互配合？
帶著這些疑問，作為一個后端程序員，進行了系列調查，要把我的成果分享出來（可能錯誤百出）。
首先前端開發的三大基礎：
html 這個是最基礎的，被稱為：超文本標記語言。什么意思？簡單來說就是描述一個頁面的結構，比如：頁面的頭部，頁面的內容，頁面的尾部。也就說，它控制一個頁面的結構。瀏覽器會按照它定義的結構來進行解析，顯示不同內容。
css 我們對美的追求是無止境的，光有結構，看起來沒有色彩，有些地方不突出。就像衣服：原始人用樹葉、獸皮，隨著進步，我們穿絲綢、破洞牛仔，搭配絲巾、手表等等，所以就是用來控制html的樣式，讓它變的更好看。
JavaScript 這是本文主要闡述的地方，有了html+css，顯然還不能滿足我們的追求，會html、css的人不能叫做前端工程師、更不能叫程序媛。但是如果你會了 JavaScript，江湖就有你的依稀之地，這也是本文主要介紹的部分。
目前我們很多時候常說的前端工程師，其實主要指的就是其 js工程師。在Web世界里，只有JavaScript能跨平臺、跨瀏覽器驅動網頁，與用戶交互。
功能越強大，責任也越多。現在 js（后面全部使用簡稱，字太多，不想寫）使用的越來越多，早期 js 僅僅用來做一些簡單的交互，隨著現在移動互聯網的發展，各項硬件設備的性能提升。項目越來越復雜，效果越來越酷炫。js 做的事情也更多。
當然今天不講這么多發展歷史（關鍵是我也沒理清呀），總的來說就是 js 開發工作原來比較簡單，大家隨便寫寫久搞定工作了，但是現在工作的復雜度越來越高，像以前那么任性的工作，開發麻煩、維護麻煩。還好具備程序員三大美德人，開始構建一些工具。
Perl語言的發明人Larry Wall說，好的程序員有3種美德： 懶惰、急躁和傲慢（Laziness, Impatience and hubris）。
懶惰：
是這樣一種品質，它使得你花大力氣去避免消耗過多的精力。它敦促你寫出節省體力的程序，同時別人也能利用它們。為此你會寫出完善的文檔，以免別人問你太多問題。
急躁：
是這樣一種憤怒----當你發現計算機懶洋洋地不給出結果。于是你寫出更優秀的代碼，能盡快真正的解決問題。至少看上去是這樣
傲慢：
極度的自信，使你有信心寫出（或維護）別人挑不出毛病的程序
先是大家感覺js代碼復用是個問題，我們想用別人寫的某個功能，只能網上去翻別人寫的源碼，拷貝下來。后段語言都有自己的包管理工具，比如：java的maven，python的pip，php的composer等。于是在歷史的使命召喚中，npm誕生了，js的包管理工具。
比如以前要使用 jquery，你的到官網去下載，現在 npm install jquery 就可以了。
npm是運行在node的環境上，它們的關系又是另外一個話題，這里按下暫且不表。
像 react、vue都可以通過npm來安裝。
包管理的問題解決了，接下來又有另外一個問題，由于 js 是 Brendan Eich 這大哥花了 10 天時間設計的（牛人就是這么屌）。雖然如今廣泛應用，也由于時間緊導致留下了很多設計缺陷。
伴隨了 ES6 的發布，js越來越規范了，我們程序員肯定都想用好用的簡潔的語法來完成任務，好早點下班回家打lol呀。可惜呀，世界上成百上千萬的網站，不可能一下子全部升級，瀏覽器也不可能立馬就支持最新語法，怎么辦？babel 誕生了，它牛逼在那里？讓你可以用es6的語法寫代碼，然后在現在的環境下可以運行（在這里請自行忽略ie9以下瀏覽器）。
在你用es6寫完代碼后，用它轉碼一下，可以得到es5的代碼。不信？來個例子：
// 轉碼前
input.map(item => item + 1);
// 轉碼后
input.map(function (item) {
return item + 1;
});
上面的原始代碼用了箭頭函數，Babel 將其轉為普通函數，就能在不支持箭頭函數的 JavaScript 環境執行了。
另外 babel 其實也是用js寫的一個工具，所以它還是可以通過 npm install babel-cli 來安裝。
關于它怎么用，自己看官方文檔。
好。到目前為止，解決了兩個大問題。接著看前端還有什么問題？那么在開發中還有什么問題需要解決？合并文件、壓縮代碼、檢查語法錯誤、將Sass代碼轉成CSS代碼等等這些都是開發中的重復性任務，以前這些任務都需要多帶帶人工解決，然后為了提高效率，早點下班，就有了:Gulp Grunt這些task runner。推薦使用gulp來自動化的執行這些任務。
那么到了這里，是不是就截止了？還沒有，現在的基本都講究什么前后端分離，也就是變成了web app的方式，那么就要求頁面重新加載要變少，用戶交互要變多，也就導致一個頁面上js越來越多。這么多的js怎么管理？如何提高瀏覽器的加在速度？能否將css img html 字體這些資源也當成模塊來處理？在這些問題下，產生了很多模塊打包工具，毫無疑問：webpack是最耀眼的，也是用起來最爽的。
所以模塊打包的問題也解決了，另外說一句，gulp的部分功能可能通過webpack的插件也能解決，但并不意味著不再需要它，一般來說gulp運行在webpack之后。
再次聲明，上面所有介紹的東西，都可以通過npm來安裝獲得。所以說到底它們都是用js寫的一個工具。
ok，那么工具基本介紹完了，到底頁面怎么呈現給用戶？后臺傳過來的數據怎么綁定到dom里邊去？如果向后臺發起請求獲得數據？等等，這些需要一個js業務框架來完成。所以react、vue就是來解決這些問題的
最后至此前端的一個工作結構介紹至此結束。再瞎逼逼兩句，學習是一件持續的事情，在學習某個新東西前，先要對它是干嗎的，它解決一個什么樣的問題有個認識，然后面對知識你才能在自己的腦海中建立一個體系。
參考了很多資料，貼在這里供參考:
[1] 我們為什么需要Webpack？
[2] Vue 對比其他框架
[3] Webpack、Browserify和Gulp三者之間到底是怎樣的關系？
[4] Babel-轉碼器
[5] 用自動化構建工具增強你的工作流程！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82319.html
摘要：項目前端工程化的探索不通過層實現非網頁開發的前后端分離。做過這樣項目的各位攻城獅應該都知道有多痛苦吧。仔細想來，其實只是想要模板和靜態資源，我們可以直接在目錄下寫，當然也可以開一個前端工程來寫，最后把模板和靜態資源到工程的相應目錄下。 Django項目前端工程化的探索 不通過node層實現非SPA網頁開發的前后端分離。 技術棧：webpack + jade + es6 + scss +...
摘要：項目前端工程化的探索不通過層實現非網頁開發的前后端分離。做過這樣項目的各位攻城獅應該都知道有多痛苦吧。仔細想來，其實只是想要模板和靜態資源，我們可以直接在目錄下寫，當然也可以開一個前端工程來寫，最后把模板和靜態資源到工程的相應目錄下。 Django項目前端工程化的探索 不通過node層實現非SPA網頁開發的前后端分離。 技術棧：webpack + jade + es6 + scss +...
摘要：項目前端工程化的探索不通過層實現非網頁開發的前后端分離。做過這樣項目的各位攻城獅應該都知道有多痛苦吧。仔細想來，其實只是想要模板和靜態資源，我們可以直接在目錄下寫，當然也可以開一個前端工程來寫，最后把模板和靜態資源到工程的相應目錄下。 Django項目前端工程化的探索 不通過node層實現非SPA網頁開發的前后端分離。 技術棧：webpack + jade + es6 + scss +...
摘要：項目前端工程化的探索不通過層實現非網頁開發的前后端分離。做過這樣項目的各位攻城獅應該都知道有多痛苦吧。仔細想來，其實只是想要模板和靜態資源，我們可以直接在目錄下寫，當然也可以開一個前端工程來寫，最后把模板和靜態資源到工程的相應目錄下。 Django項目前端工程化的探索 不通過node層實現非SPA網頁開發的前后端分離。 技術棧：webpack + jade + es6 + scss +...
摘要：前端性能優化的涉及點從服務器到協議再到宿主環境本身都要有比較深刻的認識，業界目前主要還是以雅虎總結出來條前端性能優化的黃金軍規為參考。 歡迎大家前往騰訊云技術社區，獲取更多騰訊海量技術實踐干貨哦~ 導語 : 從事前端有6年+的時間了，從最開始的美工到重構再到偏向js邏輯開發的前端開發，一直在前端這個行業里面摸索和學習，我現在將自己這些年的一個心得體會來個系統性的梳理寫成一篇關于性能優化...
閱讀 2716·2021-09-24 09:47
閱讀 4366·2021-08-27 13:10
閱讀 2981·2019-08-30 15:44
閱讀 1281·2019-08-29 12:56
閱讀 2594·2019-08-28 18:07
閱讀 2614·2019-08-26 14:05
閱讀 2552·2019-08-26 13:41
閱讀 1265·2019-08-26 13:33
