1. 前端項目打包部署
通過vue-cli和webpack構建的項目體積一般都較大，在生產環境下，需要進行打包部署。
1.准備
2.打包
3.部署
一閃而過
輸入 http://localhost/dist ，可以看到項目運行結果
2. 前端自動化6部是個車間還是個什麼意思
先來說說為什麼要自動化。凡是要考慮到自動化時，你所做的工作必然是存在很多重復乏味的勞作，很有必要通過程序來完成這些任務。這樣一來就可以解放生產力，將更多的精力和時間投入到更多有意義的事情上。隨著前端開發不再是簡單的作坊式作業，而成為一個復雜的工程時，還涉及到性能優化一系列工作等等，這時自動化已然是迫切的需求。
早期的網站開發
在還沒有前端工程師這種分工如此明確的崗位時，大家所理解的前端工作無非就是製作網頁的人，包括html、css、js等。稍微高級點的可能就是php了，可以讀寫資料庫，可以稱之為動態的網頁。通過近幾年的發展，分工越來越細，在大公司如BAT三家，基本是把前端分開來了，有專門的人寫js，有專門的人寫css。以前一個網頁可以一個人搞定，包括切圖，寫頁面到寫邏輯，無非是幾個資源鏈接拼湊起來。當然邏輯性不強，頁面不重。
最簡單的頁面如下：
<!DOCTYPE html>
<html>
<head>
<style>....</style>
</head>
<body>
hello world
</body>
<script>
....
</script>
</html>
這樣幾個html標簽就能展示成網頁了。順便寫幾個邏輯，填寫幾個表單就差不多了。這就是早期的網頁。
javascript庫
有一次需求你做了一個頁面，然後第二次需求，你領導又讓你做了頁面，只是這次與上次的邏輯都差不多，就改改樣式皮膚，修改圖片等等。這樣你就要從原來的地方拷貝一份代碼過來。如果有一天發現一個bug，你就需要修改兩處地方，這使得你非常的惱火，於是就把公共的邏輯抽取出來，兩個頁面都引用這段代碼，這樣就很好的解決了這個問題。以後有第三個第四個頁面，你也不會擔心了。漸漸的公共的代碼越來越大，又是個獨立的文件，這個文件就成為了一個庫文件了，就像jquery等等。
模塊化
隨著業務的不斷擴大，頁面越來越多，邏輯越來越重，之前你提取出來的庫文件越來越大，功能越來越多。A頁面只引用了其中的一部分函數，B頁面C頁面同樣如此，後來你決定將庫文件拆分成更小的模塊，由各自的功能決定應該在哪個模塊。這樣一來前端開發就此演化為模塊化開發方式。你開發的產品就像搭建積木一樣，將各個模塊組裝在一起。
網頁優化
好了，現在你的工程很龐大了，文件數量新增了非常的多，JS模塊也很多，這時候一個頁面也能載入了上十個js文件或者好幾個樣式文件。用戶訪問你的網頁的時候需要把這些資源從伺服器下載下來，所以理論上來說，想要加快你的網站，比必須減少下載的時間。可以從下載的數量和下載的大小出發，在不做大改變的前提下就是減少HTTP請求數以及壓縮文件大小。雅虎的網頁優化十四條軍規中很大一部分是針對這種情況進行優化，如：
1、合並請求
2、使用雪碧圖
3、壓縮js、css代碼（除去空格，混淆等等）
4、延遲載入
在PC時代，這些問題可能不是那麼尖銳。移動互聯網的興起，對網頁速度提出了更高的要求，因為網速相對比較慢。也有新的優化措施出現，比如緩存js文件等。可是要做到這些，並不是很容易。假如你的頁面引入十個JS文件，這樣發布出去顯然是不好的，所以你要手動合並，將十個JS文件合並成一個，或者幾個。然後還要將合並後的文件進行壓縮。發出去之後產品經理發現有個小問題需要優化一下，這時候你又要重復剛才的工作。如果這樣的事情發生三次，或者更多次，你會變得惱火。當然這只是令你惱火的一點點因素而已，更多的還有合並雪碧圖等等。
經歷過幾次痛苦之後，你會發現性能優化與工程本身之前存在一些矛盾的地方。就是在優雅的開發的同時，兼顧性能方面的考慮實在難以做到。這時自動化工具太有必要了，將開發與發布隔離開來。按照優化的准則，利用構建工具，在發布的時候輕松一鍵搞定，這將是最理想化的作業方式。
一些構建工具
nodejs的出現，給前端開發帶來了一些改變。在沒有任何語言障礙的情況下，前端同學可以轉為後台開發，nodejs帶來另外的一個福音便是構建工具。之前的壓縮合並工具大多是由java編寫的，像雅虎的yui compressor，但對沒有java基礎的前端開發來說，至少要走不少彎路。然後最近一兩年比較火的是國外的grunt和gulp，以及國內的FIS。相比而言，國外總是走在前頭，在探索更好的開發方式，做出了很多探索。
grunt
之前在鳥廠的時候，在組內也嘗試推廣過模塊化的開發方式，主要是用seajs模塊載入器，關於這個的好處我這里就不展開說明了。這種方式從11年開始到現在基本已經得到了認可，或者說是未來的趨勢，ECMAScript 6已經將模塊化加入了規范。等到瀏覽器支持應該是幾年之後的事情。這種模式主要是參考了nodejs，將其思想運用到瀏覽器上。seajs模塊化的詬病之處便是網路請求，上線前面臨的一個問題就是模塊太多，有十幾個文件，需要合並和壓縮，而且還不能簡單的將文件合並在一起。有一套他自己的規則。
在開發的時候，一個模塊對應一個文件，如下：
// a.js
define(function(require, export, mole){
require('./b')
// xxxxx
});
//b.js
define(function(require, export, mole){
// xxxxx
})
如果上線前簡單的將這兩個文件合並在一起，那麼a模塊是不能找到b模塊，因此這樣的做法是行不通。一個規則是根據文件的路徑，給每個模塊加上一個唯的id，id的值就是該模塊的路徑：
// a.js
define('a', function(require, export, mole){
require('./b')
// xxxxx
});
//b.js
define('b', function(require, export, mole){
// xxxxx
})
所以在自動化的過程中，需要提取模塊的唯一ID，然後再進行合並。
grunt的插件很多，也非常的成熟，能夠滿足各式各樣的需求。作為新手，我是琢磨了大概半個月的時間才大概了解了其配置文件的意思，但也只是知道用，不明白個所以然。grunt的運作方式就是根據配置文件載入相應的插件，完成相應的任務（task）。當時中文資料比較少，英文也比較晦澀，尤其是配置文件中各配置項的意思不太明白。而當文件多起來了，構建的效率明顯跟不上。加上組內也不太重視，所以就沒怎麼去折騰了。轉去鵝廠之後，grunt就無疾而終了。
gulp
沒有在實戰項目中運用過，暫不說明
組內的構建工具
剛來到鵝廠時，也有自己的一套構建工具，比較單一，項目不大。主要是將上文提到的seajs所帶來的文件解決掉，提取模塊ID，合並之。隨著業務的發展，越來越不滿足實際的需求，後來索性放棄了它，轉而投向網路的FIS。
FIS構建工具
放棄之前的構建工具是因為一個尖銳的問題引起的，就是在發布的時候，有一段時間將會引起外網報錯，就是頁面已經出去，js文件卻還是舊的，即使你在文件後面加上了查詢參數也不太起作用。加上瀏覽器和CDN本身的緩存，這個問題一時之間找不到好的解決方案，唯一的辦法就是採用新的文件，文件加上自身的hash值作為文件名。這樣一來就瞄準了網路的FIS，它能夠簡單的實現我們所需要的功能。
核心思想是文件的定位，也就是在開發測試的階段並不需要將文件hash，只需要在上線的那一刻來做這步。找到原有文件的依賴，將其替換為新的文件名。
理想都很美好，但現實真的很殘酷。FIS上手相對於grunt是要簡單些，但其一點也不簡單。需要理解整體的思想才能去實施，而且小白用戶基本不會使用，除非是一些簡單的合並需求。但復雜的業務場景FIS是滿足不了的。包括前面提到的模塊ID的提取，seajs模塊文件的合並等都需要進行二次開發才能夠做到。
很多頁面是嵌入到APP內部的，APP本身也可以做一次緩存，根據特定的文件名規進行緩存，徹底消滅了304請求，如果每次都是新文件，在伺服器端也可以配置更長久的緩存期，所以這里也需要定製開發。
FIS最值得詬病的地方就是全局構建，這一點不僅使得構建速度快不起來，而且生成的新文件特別多，導致發布的時候去挑選文件。在多人協作開發的時候，會產生沖突，發布的過程極其的痛苦，不知道網路內部的人是怎麼使用的。望著文件夾滿是hash的文件名，瞬間就奔潰了。這是小組內部使用FIS後，血的教訓。
後來決定大刀闊斧的對FIS進行改造。在構建的時候只生成相關的資源文件，核心是找到該文件所依賴的所有的資源文件。當然還是全局構建，只是在生成文件的時候不生成其他不相關的。
這樣發布工作變得非常輕松，一目瞭然。然後配合現在的發布工具，基本上整個開發發布流程也比較順暢了。那天小組會議討論，構建工具的理想目標是什麼，這個問題我也沒有細想過，總之就是要從重復的勞動中解放出來，把時間花在值得的地方。或許可以採用一鍵發布，這可能就是理想，也是後期可以考慮再優化的地方。
現在組內所採用的構建工具，已經和FIS本身有很大的差別了。進行了很多地方的改造，後面有機會進行整體的開發發布流程分享，以及我的一些構建思路。
iamaddy
關注
1
0
0
專欄目錄
4款前端自動化構建工具的介紹與對比.zip_java自動化框架
01-07
4款前端自動化構建工具的介紹與對比.zip 大家都知道webpack是當人不讓的前端自動化構建工具,但是除了它還有其它常用的前端打包工具存在,現在我們來比較4款
前端自動化構建工具(Grunt,、Gulp、 Webpack)
01-02
<span style="color:#404040;">使用構建工具去對 JS、CSS、HTML、LESS、IMG 等進行合並壓縮構建到最後實現自動化構建項目。是前端工程師必備的技能之一。 本套視頻主要講解當前開發中最流行的三種自動化構建工具: Grunt, Gulp, webpack。從理解什麼是構建工具，為什麼要用構建工具，到如何去使用構建工具。 學習本套視頻之前 建議先學習 JS 模塊化。</span>
如何實現自動化前端開發？
CSDN資訊
7051
IDE不僅是文本編輯器，還是編譯器、生成器、調試器和集成器。 作者 |Nicolus Rotich 譯者 |彎月，責編 | 郭芮 出品 | CSDN（ID：CSDNnews） 以下為譯文： 每一行代碼都可以表示為字元串變數，無論代碼本身執行了哪些操作。 這就是我們使用文本文件（即集成開發環境，IDE）向計算機發布指令的根本原因，我知道你一定在想：文本編輯器的名字也太高級了吧。...
前端自動化發布實戰總結
weixin_34418883的博客
163
為什麼要做 今年4月份，開始自己的第二份工作，習慣了老東家如絲般的發布體驗，一下子感覺來到了「原始社會」。 首先這是一篇長文，主要介紹自己在做自動發布這個過程的一些思考。 引用玉伯的Web研發模式演變來說，現在我們處於 - Web1.0時代： 前後端代碼耦合 java環境對前端過於復雜 缺乏工具和規范，代碼難維護 內嵌代碼：html內嵌js，j...
前端項目自動化部署
最新發布
@SCY
392
本文主要內容為三個方面： 一、使用Git倉庫來管理項目 二、如何使用雲伺服器 三、使用Jenkins進行自動化部署
如何實現Web前端自動化？讓這些工具幫助你
xiaoxijing的博客
1569
隨著前端技術的發展，前端開發從靜態網頁的開發到復雜的前後端交互再到基於node.js的全棧開發，前端需要做的事情越來也多，前端代碼的邏輯和交互效果越來越復雜，越來越不易於管理。模塊化開發和預處理框架把項目分成若干個小模塊，增加了最後發布的困難，沒有一個統一的標准，讓前端的項目結構千奇百怪。在新技術不斷湧入的多元化發展模式中，Web前端工程師的工作量也越來越大。前端自動化構建在整個項目開發中越來越重...
前端工程化實戰 - 自動化構建工具
每天進步一點點
496
最典型的運用場景就是在去開發網頁應用時就可以使用： main.scss index.html package.json 安裝 Sass 模塊 安裝完成後，在 node_moles 下有一個 .bin 目錄，這個目錄下有一個 Sass 的命令文件，可以使用指令打開幫助信息 將 Sass 文件轉換成 CSS 使用 或 啟動 實現自動化構建 （1）安裝 browser-sync 模塊，用於啟動一個測試伺服器，去運行項目 （2）在 scripts 中添加 serve 命令，通過 br
前端自動化部署
qq_41206257的博客
2689
名詞解釋 集成：在推送或者 merge 代碼後自動進行構建打包 交付：將上一步生成的代碼包發布至測試、生產等環境 需求 在 git 代碼倉庫發生變化後，自動執行打包腳本，並且發布至伺服器。 解決的問題 在之前每次開發完畢需要上線之前，需要手動執行 bash 命令打包，並且將打包後的代碼人為的拖動至上傳應用（FlileZilla Pro）。 手動執行構建腳本消耗時間人力 而拖動代碼文件會存在拖拽錯誤，覆蓋之前的其他項目代碼等難以預料的問題 工具選擇 gitlab/github/gitee Jenki
前端自動化介紹
張營的技術博客
1815
文章目錄DevOps介紹前端自動化自動化相關概念問題提出常見現象最佳實踐 DevOps介紹 相信大家或多或少的聽過這個詞DevOps，而且看起來很高大上，其實這個是敏捷開發的一種執行流程表現，先來一張經典的DevOps流程圖： 具體的流程為： 先是計劃plan，編碼code，然後編譯build，測試test（Dev） 然後發布release，部署deploy，運維operate，監控monitor（Ops） 然後發現問題或有新的需求，就重新計劃plan。。。如此循環 這就是完整的DevOps流程。 下
前端項目自動部署
weixin_29005819的博客
1190
一、實現的最終效果 點擊一下，即可實現 項目打包 文件壓縮(便於上傳到伺服器) 連接伺服器 備份 上傳打包的文件 解壓 完成部署 二、原理及需要的插件 原理： 執行shell腳本 需要的npm依賴包：archiver(壓縮)，ssh2（執行腳本：如連接伺服器，解壓等操作） 三、詳細步驟 3.1 安裝包 yarn add archiver ssh2 3.2 引入包和編寫配置文件 const archiver = require('C:\\Users\\Administrator\\AppDa
前端自動化測試詳解
wdquan19851029的專欄
2405
這篇文章主要向大家介紹前端自動化測試詳解,主要內容包括基礎應用、實用技巧、原理機制等方面，希望對大家有所幫助。 1 前言 文章研究了四個問題：什麼是自動化測試、為何要自動化測試、什麼項目適合自動化測試、自動化測試具體要怎麼作。在尋找這四個問題答案的過程當中，梳理了一套完整的前端自動化測試方案，包括：單元測試、介面測試、功能測試、基準測試。 2 什麼是自動化測試 維基網路是這樣定義的html 在軟體測試中，測試自動化（英語：Test automation）是一種測試方法，使用特定的軟體，去控制測試
Gitlab-ci:從零開始的前端自動化部署
大灰狼的小綿羊哥哥的博客
2669
前言 本文為首發原創，同時轉載至公眾號「全棧前端精選「和「廣發證券金融科技」中 目錄 一.概念介紹 1.1 gitlab-ci && 自動化部署工具的運行機制 1.2 自動化部署給我們帶來的好處 二.知識預備 2.1 gitlab-ci涉及的抽象概念(Runner/PipeLine/Executor/Job ) 2.2 YML文件的基本語法規則 2.3 .gitlab-ci.yml配置的特定關鍵字 三.CI實戰 3.1 編寫一個gitlab-ci的「he
vue前端用伺服器上路徑的圖片展示_談談前端性能自動化
weixin_39968640的博客
1445
前述：前段時間出了性能分析的需求，需要對前端頁面性能做一套自動化測試工具。領導都發話了，那咱說干就干。花了一周時間去找資料以及匹配優秀並且合適的開源插件。花了一個月的時間(斷斷續續，需求也要做的~)完成了這個工具的建設和開發。目前也搭建了一套平台來支撐這樣的工具使用。前端用的VUE，後端用的node(由於本人較熟悉前端)，資料庫用的是mangoDB。好了，話不多說，上才藝~設計背景 & 前...
實現前端項目自動化部署（webpack+nodejs）
winne雪
2097
前言： 一般來說，我們前端是不需要關心部署的事情的，只需要把打包後的文件直接丟給後台去部署就可以了。但是呢，如果頻繁修改一點東西就要叫後台進行部署，這樣後台會很煩（畢竟人家還有其他工作嘛），我們也會很不好意思。 或許有些公司會給前端配置可視化操作伺服器文件的軟體（FTP客戶端），這時我們就可以打包後自己到伺服器上部署了，如果不同環境需要部署到不同伺服器，此時我們又需要區分打包再手動上傳到伺服器上。 這時我們就會想，有沒有直接一句命令就能自動化部署到不同伺服器上，根本不需要打開軟體來手動上傳的？？？ 答案：必
前端項目自動化部署——超詳細教程（Jenkins、Github Actions）
q411020382的博客
1374
參考資料 Docker 入門教程
常用的前端自動化構建工具gulp/grunt/fis --簡介
杜杜的博客
235
常用的前端自動化構建工具 之前我們自動化構建將入門級別使用的 NPM Scripts自動化構建工具對於相對復雜的項目構建會比較吃力，那麼我們會了解 Gulp Grunt fIS 用法基本相同：都是通過一些簡單的代碼，組織一些插件的使用，然後就可以用工具代替我們一些重復的工作，增強開發效率。 Grunt 是基於內磁碟實現的 最早的自動化構建工具 Grunt(點擊可進入官網查看) 優點： 它的插件幾乎可以幫助我們完成任何我們想要做的事情， 缺點： 由於工作過程是基於臨時文件去實現的，所以構建速度較慢。 下
前端自動化部署項目到伺服器 -- 一行命令搞定，摒棄傳統的手工部署 npm run build
一個來自外太空的遊客
2353
傳統的前端代碼手工部署流程如下： 傳統的手工部署需要經歷： 1.打包，本地運行npm run build打包生成dist文件夾。 2.ssh連接伺服器，切換路徑到web對應目錄下。 3.上傳代碼到web目錄，一般通過xshell或者xftp完成。 傳統的手工部署存在以下缺點： 1.每次都需要打開xshell軟體與伺服器建立連接。 2.當負責多個項目且每個項目都具有測試環境和線上環境時，容易引起部署錯誤。 （個人之前非常悲劇地遇到過一次，由於同時負責四個項目，八個環境。一天同時可能修改多個項目，
「相關推薦」對你有幫助么？
非常沒幫助
沒幫助
一般
有幫助
非常有幫助
©️2022 CSDN 皮膚主題：大白 設計師：CSDN官方博客 返回首頁
關於我們
招賢納士
商務合作
尋求報道
400-660-0108
[email protected]
在線客服
工作時間 8:30-22:00
公安備案號11010502030143
京ICP備19004658號
京網文〔2020〕1039-165號
經營性網站備案信息
北京互聯網違法和不良信息舉報中心
家長監護
網路110報警服務
中國互聯網舉報中心
Chrome商店下載
賬號管理規范
版權與免責聲明
版權申訴
出版物許可證
營業執照
©1999-2023北京創新樂知網路技術有限公司
iamaddy
碼齡8年
暫無認證
3
原創
42萬+
周排名
115萬+
總排名
8683
訪問
等級
122
積分
2
粉絲
3
獲贊
0
評論
1
收藏
私信
關注
熱門文章
聊聊前端自動化 3903
扒一扒前端構建工具FIS的內幕 3474
web前端性能優化–緩存 1306
分類專欄
javascript
3篇
技術
3篇
您願意向朋友推薦「博客詳情頁」嗎？
強烈不推薦
不推薦
一般般
推薦
強烈推薦
最新文章
扒一扒前端構建工具FIS的內幕
web前端性能優化–緩存
2015年1篇2014年2篇
舉報
————————————————
版權聲明：本文為CSDN博主「iamaddy」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/iamaddy/article/details/42364137
3. 前端打包問題
你要開發一個公共包，但是又不了解js知識，那就把js當java對待就可以了
這個包依賴jQuery，那麼打包後的主文件不一定將jQuery也打包進去
這個打包後的主文件不一定不再依賴其它任何js文件
請採納
4. 寫項目難道不是前端寫好給後端嗎
測試過了沒問題。一般來說，前端把項目開發好，測試過了沒問題，就可以把打包好的項目丟給後端處理了。
5. 搭建reactJS 項目的時候 區分各種環境進行打包處理
首先需要安裝一下 dotenv-cli
（dotenv-cli 工具提供了多環境配置的能力；其使用過程為：對不同環境設置不同的環境變數文件，通過設置前端工程執行命令載入對應的環境變數文件，即可實現多環境的配置。）
cnpm install dotenv-cli -D
配置完事後 在項目根目錄下新建 例如 .env.dev .env.prod 的 test 類型文件
文件內寫入 對應的環境配置內容
如 圖
配置完事後 再去 package.json 文件中 修改配置如圖
這樣 其實就完成了 各種環境的打包配置
在webpack.config.js 中輸出 配置的路徑 如圖
6. 前端項目已經打包上傳了,再改動上傳還需要打包嗎
只需要上傳單個文件
請採納
7. Webpack前端項目打包配置
1、安裝依賴包
初始化項目為nodejs項目
另一種是在html中通過img標簽的src引入，因為webpack對html支持不友好，所以需要藉助插件html-webpack-plugin
第三種是借用拷貝插件，直接強行拷貝所有圖片，因為本項目圖片是在xslt中引用，所以採用第三種和第一種結合的方式處理圖片，在plugin參數中添加
如果css是與其餘的css一起打包，那麼其中對fonts資源的引用路徑也會自動發生變化，一定注意，是個大坑！！
8. 前端（6）開發自己的組件庫+初步測試
使用vue的腳手架來搭建項目，這里使用webpack-simple模板
出現提示直接Enter確認即可
然後根據提示，運行上面後三行的命令，開始運行項目
根據下圖所示修改目錄結構，主要有兩處
這是一個最基本的Element-ui的入口文件，返回一個帶有install方法的對象
在按照 Element-ui 的目錄結構編寫完一套最基本的框架後，現在開始配置打包發布的文件 webpack.config.js 。我們需要修改項目的入口文件以及輸出配置
如果你想在發布之前簡單測試一下組件庫，可以進行如下操作：
1. 搭建自己的 vue 組件庫（三）—— npm 上面發布自己的組件庫
9. 前端項目的開發流程
前端開發流程概述
前端開發流程可分為需求分析、開發階段、測試階段、維護階段，下面分別進行敘述。
2.1 需求分析
這個環節中，首先是和客戶進行交流，了解客戶的需求，然後分析項目的可行性，撰寫項目需求文檔。如果項目可行，則起討論具體方案，分模塊分步驟進行規劃，分析項目進度安排、所需成本，進行原型設計（包括頁面布局圖，頁面邏輯流程圖，說明文檔等。通過原型設計，可以讓項目組和客戶都可以對項目有一個直觀感受，同時可以低成本高效率的復現業務場景和各模塊流程）。
可以說需求分析階段是整個前端項目的基礎，基礎不牢，地動山搖。可以試想，如果和客戶溝通不順暢，有的方面客戶沒搞清楚是什麼效果，開發完成後就可能與客戶發生糾紛；如果可行性有問題，有的模塊很難實現或成本超出預算，就很難處理。
2.2 開發階段
這個環節是前端工程師主要參與的部分，按照需求分析階段的規劃按步驟完成任務。
根據產品需求分析文檔和原型圖進行UI設計，對產品的整體美術風格、交互設計、界面結構、操作流程等做出設計。負責項目中各種交互界面、圖標、LOGO、按鈕等相關元素的設計與製作。
根據UI設計進行規劃，提取界面中可以復用的模塊方便重復利用，分析界面是否有實現難度比較困難的地方，進行溝通和功能排期，按功能大小以及難度進行功能時間的評估，和後端溝通好排期時間，保證大家能夠更有效地開發合作，針對功能復雜的地方要先理清思路。
不要盲目開發前端搭建框架。根據設計圖進行前端界面開發，以及遇到的問題及時與產品、UI、後台人員溝通，保持大家信息一致，針對不清楚的地方也要及時溝通，以免做錯功能。
根據後端介面進行欄位填充，以及部分功能開發。針對缺少的欄位或者數據結構進行提出，及時與後端反應，盡量讓大家都能以最小的改動完成後續開發工作。前後端都要按照規范進行開發，針對不規范的地方要給與提出、指正，營造出規范的工作模式，以後維護成本和溝通成本更低以及開發效率更高。如果前端的設計進度遠遠超前後端的介面和數據結構設計，也不必等後端，可以自行開發nodejs伺服器配合postman等介面軟體進行開發。
前後端功能聯調、完成自測。檢查功能完成情況，看是否有遺漏，出現問題及時溝通解決。
2.3 測試階段
發布測試、修改bug、發布上線，自測完成後提交測試，測試根據提交的項目以及需求進行測試，提出bug給相關人員修改，開發人員周期性的配合修改bug，保證今天能夠修復昨天的bug。
發布dev環境，配合測試，修復bug以及需求優化
發布test環境，修復bug以及需求優化
發布it環境，修復bug以及需求優化
發布pre環境，修復bug以及需求優化
pre驗收之後，發布線上環境，產品進行驗收
2.4 維護階段
如果客戶驗收通過，項目就進入了維護階段，程序的維護包括程序上線後後續bug的修復和程序版本的更新。
3 個人經驗總結
3.1 文檔很重要
前端項目的文檔似乎已經作為前端工程化的標准流程之一了，文檔寫的好，可以便於同事快速了解你的代碼功能和需求，便於協作。可以想像，隨之項目復雜度增加，體量越來越龐大，開發團隊人數也越來越多。這種情況下，如果像變魔術一樣隱匿中間流程而直接得出結果，後果可想而知：項目復雜度越增加就越難以管理，開發效率低，合作混亂，結果甚至導致項目死亡。
好的文檔看起來就像一個產品說明書，但作用卻遠遠超過了說明書，不僅僅告訴你如何使用，還應該告訴你項目的設計思路，用了哪些組件，哪些部分不完善，將來有什麼規劃等等。這是一份比較好的說明文檔。
3.2 與客戶及時溝通很重要
3.3 扎實的基本功很重要
盡管當下框架、函數庫、工具包等更新迭代非常快，前端工程師有很多新的知識要學，但原生JS、HTML和CSS依然是重要的基本功，在學習前沿工具的同時不能放棄基本功的訓練。
10. docker直接跑前端服務不打包
docker直接跑前端服務不打包是網路限制了。一個npmbuild好的前端工程目錄+Dockerfile，執行dockerbuild命令，就會把本地的文件發往伺服器端去打包，公司的網路做了限制了，往伺服器發包失敗，要是成功了還看不出在哪兒打的包，失敗了就看出來了要往伺服器發送本地文件去打包。