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

yeooo 發布于2019-08-23 12:36 / 1196人閱讀

摘要：基于的一般都有，和三種類型的系統。而前端項目的設置也類似。而無論是開發，測試還是生產，代碼都相同。之所以要引入也是類似面向對象的編程思想，把和環境一些通用的配置抽取出來，避免在和里重復定義。

基于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的原創文章，請關注公眾號"汪子熙":

GPU云服務器云服務器 api設計的最佳實踐最佳實踐 webrtc最佳實踐 cdn最佳實踐

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98824.html

前方來報，八月最新資訊--關于vue2&3的最佳文章推薦

摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
Vue開發總結及一些最佳實踐（已更新）

摘要：基本開發環境創建的項目，作為代碼編寫工具插件推薦插件配置文章目錄項目目錄結構介紹框架選擇處理請求二次封裝項目目錄結構簡介業務相關靜態文件全局組件基礎樣式布局樣式及工具引入請求配置路由全局狀態管理工具文件入口文件主要配置文件頁面檢查配置測試基本開發環境 vue-cli3 創建的項目，vscode 作為代碼編寫工具vscode插件推薦：vscode 插件配置文章目錄項目目錄結構介紹...

NotFound 2019-08-26 13:47 評論0 收藏0