ABAP system landscape和vue專案webpack構建的最佳實踐

i042416發表於2018-10-21

基於Netweaver的ABAP transport route一般都有dev,test和prod三種型別的系統。

ABAP system landscape和vue專案webpack構建的最佳實踐

而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伺服器

ABAP system landscape和vue專案webpack構建的最佳實踐

ABAP system landscape和vue專案webpack構建的最佳實踐

當然webpack-dev-server這個依賴也必須定義在package.json的dependencies區域裡:

ABAP system landscape和vue專案webpack構建的最佳實踐

npm install把所有依賴下載到本地後,也能觀察到webpack-dev-server.js這個依賴的實現:

ABAP system landscape和vue專案webpack構建的最佳實踐

執行命令列npm run dev, 實際上執行的命令列為:

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

ABAP system landscape和vue專案webpack構建的最佳實踐

我們在前端專案build資料夾裡能看到三個和webpack相關的配置檔案:

  • webpack.base.conf.js

  • webpack.dev.conf.js

  • webpack.prod.conf.js

ABAP system landscape和vue專案webpack構建的最佳實踐

這裡也能看到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模組提供。

ABAP system landscape和vue專案webpack構建的最佳實踐

ABAP system landscape和vue專案webpack構建的最佳實踐

當然如果大家還不瞭解什麼是Webpack,可以參考這篇簡書文章,來自zhangwang,寫得相當詳細。

入門Webpack,看這篇就夠了

WebPack可以看做是 模組打包機 :它做的事情是,分析你的專案結構,找到JavaScript模組以及其它的一些瀏覽器不能直接執行的擴充語言(Scss,TypeScript等),並將其轉換和打包為合適的格式供瀏覽器使用。

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

ABAP system landscape和vue專案webpack構建的最佳實踐


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2216996/,如需轉載,請註明出處,否則將追究法律責任。

相關文章