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

yeooo 发布于2019-08-23 12:36 / 1168人阅读

摘要：基于的一般都有，和三种类型的系统。而前端项目的设置也类似。而无论是开发，测试还是生产，代码都相同。之所以要引入也是类似面向对象的编程思想，把和环境一些通用的配置抽取出来，避免在和里重复定义。

基于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最佳实践

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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