前言

之前的開發(fā)選擇的是完全舍棄服務(wù)端，僅保留最簡(jiǎn)單web服務(wù)器提供angular經(jīng)打包的靜態(tài)資源，此外所有的業(yè)務(wù)與數(shù)據(jù)請(qǐng)求都訪問一個(gè)分離的WebApi來實(shí)現(xiàn)。不過最近碰到一個(gè)需求，有必要使用多個(gè)客戶端，而各客戶端本身都是webpack打包出來的js而已，沒必要每個(gè)客戶端都自己建一個(gè)站點(diǎn)，這就有必要搭建一個(gè)服務(wù)端，根據(jù)參數(shù)動(dòng)態(tài)渲染不同客戶端的腳本來服務(wù)多個(gè)客戶端了。主要需要解決兩個(gè)問題，一是防止前后端路由沖突各自有效工作，二是如何實(shí)現(xiàn)一套比較合理的部署方案?；\統(tǒng)一點(diǎn)看待這個(gè)問題，無非就是要實(shí)現(xiàn)如題目所描述的，如何將專注前端的強(qiáng)大框架(angular)整合到一個(gè)健壯的現(xiàn)有服務(wù)端(.Net)項(xiàng)目中去。

Webpack配置

第一步必然是要先得到前端項(xiàng)目的打包資源，由強(qiáng)大的webpack來完成，目標(biāo)是將angular的所有依賴以及應(yīng)用主代碼分別打包到polyfill.js、vendor.js、main.js三個(gè)腳本中，以及異步懶加載的模塊各自打包成一個(gè)chunk.js。webpack博大精深，剛接觸會(huì)摸不著頭腦，好在其終究是用來給我們帶來方便的一個(gè)工具而已，使用起來是很有條理的。其主要的介紹可以移步webpack的官方文檔【https://doc.webpack-china.org 】，認(rèn)真吸收完遠(yuǎn)遠(yuǎn)足夠?qū)懗鯽ngular-webpack-starter【 https://github.com/AngularClass/angular-starter 】這樣完善的啟動(dòng)項(xiàng)目來了。

簡(jiǎn)單來說webpack配置有四部曲：

一、 定義入口文件 包含angular的依賴，angular框架代碼以及項(xiàng)目的啟動(dòng)代碼即可，比如angular-webpack-starter中的配置：

entry: {
 'polyfills': './src/polyfills.browser.ts', // 依賴項(xiàng)
 'main': AOT ? './src/main.browser.aot.ts' : './src/main.browser.ts' // 主程序
 },

二、 定義打包規(guī)則

打包規(guī)則有好一些需要配置的，包括了各種文件類型的打包，angular模塊的打包等，配置方式見官方文檔或直接參照現(xiàn)成的啟動(dòng)項(xiàng)目，直接看難免懵逼，但不要怕，規(guī)則其實(shí)就那么點(diǎn)，眼熟就成功了大半。

三、配置插件

webpack有非常多的插件，用來強(qiáng)化打包能力以及規(guī)則的擴(kuò)展，可以看看啟動(dòng)項(xiàng)目中用到了哪些，這些插件在官方文檔里都能找到介紹。

四、 定義輸出規(guī)則

輸出要分生產(chǎn)環(huán)境和開發(fā)環(huán)境，本文只講生產(chǎn)環(huán)境。先明確webpack打包好的項(xiàng)目是要交給服務(wù)端使用的，給出的輸出要有幾個(gè)需求：

     1) 轉(zhuǎn)義兼容瀏覽器和ES5并壓縮。

     2)輸出文件名附帶哈希值，代碼發(fā)生更改重新打包時(shí)要有不同的哈希值，保證此時(shí)替換的資源不會(huì)被瀏覽器緩存而得不到第一時(shí)間更新。

     3)列出資源打包清單，因?yàn)楦綆Я斯Ｖ祵?dǎo)致每次文件名都是很長(zhǎng)一串奇怪字符，使用合適的webpack配置附帶一個(gè)manifest清單列出都輸出了哪幾個(gè)文件，進(jìn)一步在使用時(shí)動(dòng)態(tài)讀取其中的清單來操作輸出的文件。

作為靜態(tài)腳本添加到服務(wù)端

順利的話開發(fā)完成的項(xiàng)目能得到類似下圖的打包資源：

其中webpack-assets.json中列出了三個(gè)依賴文件：

以0、1、2、3打頭的四個(gè)chunk文件是由angular動(dòng)態(tài)引入的懶加載模塊，不需要手動(dòng)引入自然也不需要列出來，只需要保證angular能訪問到它們即可。

把這些東西全都放到一個(gè).Net MVC項(xiàng)目中去：

然后在View視圖中引入三個(gè)腳本并配置base url：

現(xiàn)在運(yùn)行MVC項(xiàng)目，定位到這個(gè)視圖可以順利渲染出angular項(xiàng)目來。問題在于手動(dòng)輸入前端路由的url時(shí)，此url會(huì)被MVC路由視為404錯(cuò)誤(因?yàn)镸VC路由中確實(shí)未定義這一規(guī)則，真正使用此規(guī)則的angular客戶端還沒有機(jī)會(huì)解析這個(gè)url就被一個(gè)錯(cuò)誤頁(yè)取代了)。

MVC路由配置

angular官方給出的指南是給服務(wù)端配置404的重定向，將所有的404錯(cuò)誤都重定向到index.html，這樣前端就能順利開始解析輸入的url了。在MVC中做法也類似，只要在MVC的路由規(guī)則中，將必要路由(比如還定義了其他的Api或者錯(cuò)誤頁(yè))之外的所有請(qǐng)求都指向指定的Action，比如筆者的這條規(guī)則，將所有其他請(qǐng)求都指向AppController下的Index：

這樣除了/page/打頭的url外所有不滿足默認(rèn)路由的請(qǐng)求都會(huì)定位到/App/Index。

使用MVC的View取代index.html

下一步是要在這個(gè)/App/Index中讀取前端打包生成的webpack-assets.json清單，將需要的文件渲染到視圖中，筆者項(xiàng)目添加了一個(gè)academyid來區(qū)分多客戶端，每個(gè)客戶端都有以自己id命名的一個(gè)資源目錄，實(shí)現(xiàn)如下圖所示：

筆者的C#比較摳腳，所以定義了一個(gè)class來解析json文件，然后才把解析到的文件名放到ViewData中以供前端使用?，F(xiàn)在視圖中就可以使用Razer語(yǔ)法來渲染腳本依賴：

這樣子配置下來，服務(wù)端其實(shí)不需要再關(guān)心客戶端的更改，只關(guān)心從webpack-assets.json中解析要加載的依賴，并渲染這些依賴即可，每當(dāng)客戶端代碼更改重新打包時(shí)，webpack-assets.json清單也會(huì)更新，毫不影響服務(wù)端。

總結(jié)

水平有限導(dǎo)致本文存在許多的不足之處，包括一直未涉及的SEO方案以及其他的隱藏問題，筆者還有很多需要學(xué)習(xí)完善的地方。

好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論