之前的開發(fā)選擇的是完全舍棄服務(wù)端，僅保留最簡單web服務(wù)器提供angular經(jīng)打包的靜態(tài)資源，此外所有的業(yè)務(wù)與數(shù)據(jù)請求都訪問一個分離的WebApi來實現(xiàn)。不過最近碰到一個需求，有必要使用多個客戶端，而各客戶端本身都是webpack打包出來的js而已，沒必要每個客戶端都自己建一個站點(diǎn)，這就有必要搭建一個服務(wù)端，根據(jù)參數(shù)動態(tài)渲染不同客戶端的腳本來服務(wù)多個客戶端了。主要需要解決兩個問題，一是防止前后端路由沖突各自有效工作，二是如何實現(xiàn)一套比較合理的部署方案?；\統(tǒng)一點(diǎn)看待這個問題，無非就是要實現(xiàn)如題目所描述的，如何將專注前端的強(qiáng)大框架(angular)整合到一個健壯的現(xiàn)有服務(wù)端(.Net)項目中去。
Webpack配置
第一步必然是要先得到前端項目的打包資源，由強(qiáng)大的webpack來完成，目標(biāo)是將angular的所有依賴以及應(yīng)用主代碼分別打包到polyfill.js、vendor.js、main.js三個腳本中，以及異步懶加載的模塊各自打包成一個chunk.js。webpack博大精深，剛接觸會摸不著頭腦，好在其終究是用來給我們帶來方便的一個工具而已，使用起來是很有條理的。其主要的介紹可以移步webpack的官方文檔【https://doc.webpack-china.org 】，認(rèn)真吸收完遠(yuǎn)遠(yuǎn)足夠?qū)懗鯽ngular-webpack-starter【 https://github.com/AngularClass/angular-starter 】這樣完善的啟動項目來了。
簡單來說webpack配置有四部曲：
一、 定義入口文件 包含angular的依賴，angular框架代碼以及項目的啟動代碼即可，比如angular-webpack-starter中的配置：
entry: { 'polyfills': './src/polyfills.browser.ts', // 依賴項
'main': AOT ? './src/main.browser.aot.ts' : './src/main.browser.ts' // 主程序
},二、 定義打包規(guī)則
打包規(guī)則有好一些需要配置的，包括了各種文件類型的打包，angular模塊的打包等，配置方式見官方文檔或直接參照現(xiàn)成的啟動項目，直接看難免懵逼，但不要怕，規(guī)則其實就那么點(diǎn)，眼熟就成功了大半。
三、配置插件
webpack有非常多的插件，用來強(qiáng)化打包能力以及規(guī)則的擴(kuò)展，可以看看啟動項目中用到了哪些，這些插件在官方文檔里都能找到介紹。
四、 定義輸出規(guī)則
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式