ABAP system landscape和vue項目webpack構建的最佳實踐

基於Netweaver的ABAP transport route通常都有dev，test和prod三種類型的系統。

而Vue前端項目的webpack build設置也相似。

以SAP成都研究院數字創新空間開發的智能服務前端實現爲例, 在package.json裏定義了名爲dev和build兩個script：

"scripts": {

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"start": "npm run dev",

"build": "node build/build.js"

}

一旦運行npm run dev，會觀察到在dev環境下使用了webpack-dev-server這個依賴啓動了web服務器

固然webpack-dev-server這個依賴也必須定義在package.json的dependencies區域裏：

npm install把全部依賴下載到本地後，也能觀察到webpack-dev-server.js這個依賴的實現：

執行命令行npm run dev, 實際上執行的命令行爲：

node "C:Usersi042416Documents_DISCodeSmartServiceFront ode_modules.bin..webpack-dev-serverinwebpack-dev-server.js" --inline --progress --config build/webpack.dev.conf.js

咱們在前端項目build文件夾裏能看到三個和webpack相關的配置文件：

• webpack.base.conf.js

• webpack.dev.conf.js

• webpack.prod.conf.js

這裏也能看到dev和prod環境，相似ABAP的開發和生產系統。區別是vue webpack的dev環境包含的是未壓縮過的代碼，方便調試，而prod環境的代碼是壓縮事後的。而ABAP不管是開發，測試仍是生產，代碼都相同。

之因此要引入webpack.base.conf.js, 也是相似面向對象的編程思想，把dev和prod環境一些通用的webpack配置抽取出來，避免在dev和prod裏重複定義。

最終dev和prod的webpack配置內容，是webpack.base.conf裏的通用內容，加上各自專屬文件裏定義的配置內容的並集, 參考第14行的merge方法，由webpack-merge模塊提供。

固然若是你們還不瞭解什麼是Webpack，能夠參考這篇簡書文章，來自zhangwang，寫得至關詳細。

入門Webpack，看這篇就夠了

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。

要獲取更多Jerry的原創文章，請關注公衆號"汪子熙":