天貓開發和部署前端代碼模塊方案

• 開發時的和部署時類庫的引用和存放是一致仍是不一樣？

開發時和部署時，類庫的的引用和存放是看起來一致，可是背後其實不同。
天貓因爲業務對模塊的線上搭建的需求比較強烈，大部分場景下無法走本地打包，都用的存放在CDN的模塊。
本地開發的時候，文件host會指到本地，引用的模塊會從服務端拉取到本地（提升下次讀取的速度，這部分工做由本地的開發server完成），可是引用的方式是和線上同樣的。
本地開發時：

const overly = require('mui/overlay/index');

打包到線上

define('xxx', ['mui/overlay/index'], function(require){
  var overly = require('mui/overlay/index');
}

請求模塊的url都是

http://g.alicdn.com/mui/overlay/4.0.0/index.js

• 模塊放在項目中仍是放在 CDN 之類服務器？

內部依賴模塊放到項目中，公共模塊放CDN。
其實這麼描述有些抽象，可是也給了開發者足夠的自由。

• 渲染網頁用 Nginx 仍是其餘動態語言的 Web 服務器？

如今貌似這個問題沒什麼好討論的。
本地開發環境最好和服務端架構保持一致，如今服務端是Node，本地確定也是Node。

• 製做網頁的流程，是先有設計師的稿，仍是先看模塊？

最理想的狀況下，設計師應當花比較多的時間和前端一塊兒維護一套模塊UI規範，而後設計師設計頁面的時候，也必須根據這個模塊UI規範來。
全部有個性化的調整，都應當考慮是否是應當補充回到UI規範中，保證總體視覺的一致性體驗。
固然，總有不合適和一些特殊場景下的視覺稿，就單獨處理好了。
因此應該是在設計師的稿子上體現模塊，而不是到前端纔來看哪些模塊和視覺稿能匹配上。

• 會選擇用本身寫的模塊仍是從社區尋找模塊？

對於模塊，社區方案必定是很是棒的，因此在沒有現成的狀況下，很是建議引入社區模塊，並在引入以後維護起來。
後面一點維護起來很是重要，引入一個模塊很簡單，維護起來就不是了，或許你會發現這個社區模塊有一些bug，或者是部分不知足需求，去修改並改善這個模塊比重寫一個模塊要求更高，難度更大（你要理解其餘開發者爲何要這麼寫代碼）。完成以後提MR到社區也是對社區的貢獻。
本身寫的狀況也有，但更多仍是要考慮本身寫的意義在哪裏，通常在社區模塊落後於你對模塊的思考和規劃時，本身寫是一個好的選擇。

 

做者：吳天豪 連接：https://www.zhihu.com/question/20790576/answer/102228074 來源：知乎 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。