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的原創文章,請關注公眾號"汪子熙":
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2216996/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Vue專案Webpack優化實踐,構建效率提高50%VueWeb優化
- 提高 webpack 構建 Vue 專案的速度WebVue
- 用mobx構建大型專案的最佳實踐
- Webpack 4 構建大型專案實踐 / 微前端Web前端
- Webpack 4 構建大型專案實踐 / 優化Web優化
- Vue 在大型專案中的架構設計和最佳實踐Vue架構
- Vue 小專案的最佳實踐Vue
- 用mobx構建大型專案的最佳實踐(2)
- webpack4構建vue專案(二)WebVue
- 用 vue2 和 webpack 快速建構 NW.js 專案VueWebJS
- webpack快速構建專案Web
- vue專案構建與實戰Vue
- 重構 Rails 專案之最佳實踐AI
- 建立和維護大型Vue.js專案的10個最佳實踐Vue.js
- 深入淺出的webpack4構建工具--webpack4+vue+route+vuex專案構建(十七)WebVue
- 使用 webpack 構建小程式專案Web
- 如何使用Webpack工具構建專案Web
- webpack2 專案構建一Web
- webpack進階構建專案(一)Web
- 【Vue】Vue1.0+Webpack1+Gulp專案升級構建方案的踩坑路VueWeb
- Webpack自動化構建實踐指南Web
- vue-cli構建vue專案Vue
- Vue最佳實踐和實用技巧Vue
- 從零開始構建一個vue專案 --- webpack歷險記VueWeb
- Vue1.0+Webpack1+Gulp專案升級構建方案的踩坑路VueWeb
- vue實踐06-專案實踐Vue
- 使用 Webpack 的 DllPlugin 提升專案構建速度WebPlugin
- 【快速學習】docker構建java專案實踐DockerJava
- Webpack 4 配置最佳實踐Web
- Vue CLI 4與專案構建實戰指南Vue
- vue構建專案的三種方式Vue
- 阿里DDD專案最佳實踐-COLA 架構總覽阿里架構
- go專案dockerfile最佳實踐GoDocker
- JavaScript 專案最佳實踐指南JavaScript
- Docker多階段構建最佳實踐Docker
- webpack 搭建 vue 專案WebVue
- 使用webpack構建一個專案 (更新ing)Web
- webpack+nodejs+npm構建前端專案WebNodeJSNPM前端