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的原创文章,请关注公众号"汪子熙":
ABAP system landscape和vue项目webpack构建的一种实践相关推荐
- php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
- vue项目查看构建后项目报告,项目个模块依赖占比比例情况
vue项目查看构建后项目报告,项目个模块依赖占比比例情况 npm run build --report or "report": "vue-cli-service bui ...
- Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomc ...
- vue项目刷新当前页面的三种方法
本文介绍了vue项目刷新当前页面的三种方法,本文图文并茂给大家介绍的非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下. 想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时 ...
- vue项目webpack打包配置
基于vue/cli3.0+脚手架搭建Vue项目(12) 文章目录 基于vue/cli3.0+脚手架搭建Vue项目(12) 前言 一.webpack配置 1.配置vue.config.js 2.配置Dl ...
- 学习TypeScript21(Rollup构建TS项目 webpack构建TS项目 esbuild + swc)
Rollup构建TS项目 安装依赖 1.全局安装rollup npm install rollup-g 2.安装TypeScript npm install typescript -D 3.安装T ...
- vue项目开发心得和一些最佳实践
博客更新地址啦-,欢迎访问:https://jerryyuanj.github.io/blog 使用vue一年多了,做了一个javaee的项目(全栈,前端使用的mvvm框架vue),三个移动端项目,其 ...
- vue项目webpack打包优化体积优化,打包体积减少200kb到4Mb
解决方法 1.压缩图片 应尽可能地压缩项目中的图片,或使用svg矢量图.雪碧图.webp图片(此种图片仅兼容谷歌和opera浏览器,但图片的体积更小)等小体积的图片,达到减少打包体积的目的. 2.路由 ...
- VUE项目WebPack打包删除注释和console
项目中使用了 jspdf 这个插件,webpack打包后注释里存在这样的 领导让删除,于是使用插件 cnpm install uglifyjs-webpack-plugin -D vue.config ...
最新文章
- Playmaker全面实践教程之playMaker编辑器
- leetcode算法题--三数之和
- 第二章指南(4.2)添加 Controller
- 雪碧图sprity 合并多图使用心得
- 【分享】一套非常简单的企业即时通讯
- 雷军发“玄妙”知识微博:暗示小米MIX4 将采用42W快充?
- android file hascode,AndroidStudio集成Lombok
- JavaEE 使用Filter实现敏感词汇过滤器
- 基于MK802的应用开发和相关的工具
- 通过telnet命令使用SMTP、POP3协议收发邮件(以QQ邮箱为例)
- 企业邮箱客户端POP协议收信后,Webmail的邮件被删除,如何调整?
- 2的32次方减1用python_3.Python入门
- Hyper-v安装和使用
- appium连接mumu模拟器,无法连接问题
- sendToTarget与sendMessage
- mysql怎么输出列表的次序_MySQL metalock的一些技巧(写大于读的案例,以及获得锁的顺序)...
- 汽车电子PKE与RKE学习笔记
- 韦尔奇经典的一次演讲:2001年夏,在股东年会上的讲话(中英文)
- 稳恒(有人透传云)NBIOT模块使用指南(2)
- 多个excel合并成一个excel的sheet
热门文章
- SAP Commerce Cloud B2B Organization 功能简介
- 动手开始创建第一个 Angular 应用并通过 gh-pages 发布到 Github 上
- CSS里的inline-size和逻辑属性
- Angular jasmine单元测试框架里expect.toHaveBeenCalled的工作原理
- 2020年10月13日工作日志 - 挂掉的单元测试
- taskdef class org.apache.catalina.ant.InstallTask cannot be found
- SAP Fiori Elements - How complex binding defined in XML view is parsed
- SAP CRM WebClient UI上文本是否可编辑,取决于哪些条件
- 如何在Hybris Backoffice里创建customer coupon
- filter operation implementation in SAP Gateway framework