ABAP system landscape和vue项目webpack构建的最佳实践

简介: ABAP system landscape和vue项目webpack构建的最佳实践

基于Netweaver的ABAP transport route一般都有dev,test和prod三种类型的系统。



而Vue前端项目的webpack build设置也类似。


以SAP成都研究院数字创新空间开发的智能服务前端实现为例, 在package.json里定义了名为dev和build两个script:


“scripts”: {undefined


“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等),并将其转换和打包为合适的格式供浏览器使用。


相关文章
|
26天前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
19 3
|
1月前
|
缓存 前端开发 JavaScript
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!(三)
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!
|
22天前
|
JavaScript 前端开发
总结 Vue3 的一些知识点:Vue3 项目打包
总结 Vue3 的一些知识点:Vue3 项目打包
|
4天前
|
JavaScript 应用服务中间件 nginx
VUE3项目启动过程中遇到的问题记录
VUE3项目启动过程中遇到的问题记录
19 0
|
18天前
|
Web App开发 JavaScript 前端开发
构建现代Web应用:Vue.js与Node.js的完美结合
在当今快速发展的Web技术领域,选择合适的技术栈对于开发高效、响应迅速的现代Web应用至关重要。本文深入探讨了Vue.js和Node.js结合使用的优势,以及如何利用这两种技术构建一个完整的前后端分离的Web应用。不同于传统的摘要,我们将通过一个实际的项目示例,展示从搭建项目架构到实现具体功能的整个过程,着重介绍了Vue.js在构建用户友好的界面方面的能力,以及Node.js在处理服务器端逻辑和数据库交互中的高效性。通过本文,读者不仅能够理解Vue.js与Node.js各自的特点,还能学习到如何将这两种技术融合应用,以提升Web应用的开发效率和用户体验。
|
20天前
|
缓存 前端开发 JavaScript
|
20天前
|
前端开发 JavaScript 安全
|
20天前
|
前端开发 JavaScript Java
|
22天前
|
JavaScript 前端开发
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题
|
25天前
|
前端开发 JavaScript 测试技术
Vue3+Vite+TypeScript常用项目模块详解(下)
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。