ABAP system landscape和vue项目webpack构建的最佳实践-阿里云开发者社区

开发者社区> 开发者小助手-bz5> 正文

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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
网站Web项目树形菜单的实现过程(ExtJS+SpringMVC+Spring+Hibernate+MySQL)
常见的OA或者bbs或者网站,左侧往往带有菜单,使用者就可以通过菜单项进入响应的功能模块或者板块或者专区,如下所示:PKU的BBS明显使用了ExtJS的海王星主题,而且使用的就是普通的tabPanel组件实现的菜单。
2249 0
云效+ACK 构建容器云 DevOps 平台 最佳实践
最佳实践目前已覆盖23类常用场景,已发布200多篇最佳实践,这其中涉及100款以上阿里云产品的最佳使用场景。目前,最佳实践已成功帮助大量客户实现自助上云。本篇主要讲述容器应用DevOpsforACK集群最佳实践。DevOps的目的是构建一种文化和环境,使构建,测试,发布软件更加快捷,频繁和可靠。而到了容器时代,需要部署的机器不但量更大,变化更剧烈,有的甚至需要根据条件自动升缩,为了满足企业敏捷的需求,持续部署也成了必须,本方案使用云效完成容器应用(小程序后端服务)的自动化构建和持续部署。
17 0
一个JavaWeb项目中使用的部分技术
-- 2015年8月8日1. Web框架: Spring+ SpringMVC + MyBatis Spring: 作为容器,工厂,用于解耦以及管理对象生命周期。 整合各类框架和依赖。 MVC  : 配置,文档与源码结合在一起,减轻开发工作量,易维护,易测试. MyBatis: 灵活稳定,自由度高,与代码生成器结合使用,易集成,易开发,代码可读性良好。
999 0
项目DevOps研发云CI实践之路
本文讲的是项目DevOps研发云CI实践之路【编者的话】DevOps是Develop与Operations的缩写。DevOps不是凭空冒出来的,是我们持续集成思想的延伸。
2431 0
DevOps 在企业项目中的实践落地
“我们把DevOps和研发任务协同结合起来,打破了研发团队的最后一道隔阂。” 往往在产品开发过程中,研发人员需要掌控的最多的工具和平台。 代码,环境,部署,容器,服务器一大堆的工具和平台要使用,但是很多平台之间无法互通,导致了工作无法同步,反复的记录报告又增加了工作量。
552 0
Visual Studio 2010 起始页中 不显示最近使用的项目问题,解决办法
最近新装了vs2010,发现打开vs2010 后 起始页面中的最近使用的栏目中 并未显示最近加载的项目 解决办法如下: 运行 regedit 打开下面的键值: HKEY_CURRENT_USER/Software/Microsoft/Windows/CurrentVersion/Policie...
495 0
JavaWeb项目的中文乱码的原因以及Servlet中处理GET请求和POST请求编码过滤器
一、乱码原因 ①传输方和接收方采用的编码不一致。传输方对参数采用的是UTF-8编码而接收方却用GBK进行解析,当然是乱码。 ②Tomcat服务器默认采用的ISO8859-1编码得到参数值。虽然①中采用了同样的编码方式,但经过tomcat一处理,也会出现乱码(GET方式)   二、解决办法 方法一 每次传输都手动设置编码(GET方式传输数据) 传输方 String name =
1284 0
2497
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载