ABAPsystemlandscape和vue项目webpack构建方法是什么

本篇内容介绍了“ABAP system landscape和vue项目webpack构建方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

成都创新互联专注于企业网络营销推广、网站重做改版、琼海网站定制设计、自适应品牌网站建设、H5场景定制商城网站建设、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为琼海等各大城市提供网站开发制作服务。

基于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服务器

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构建方法是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


网站标题:ABAPsystemlandscape和vue项目webpack构建方法是什么
网页链接:http://ybzwz.com/article/pddccg.html