webpack 编写格式-在WebRose平台搭建本地开发环境(一键红色解压版,零配置)

2023-08-29 0 1,816 百度已收录

(开源地址)

(官网,有在线Demo和API文档)

如果您没有耐心看文字介绍,请点击此链接观看:视频介绍,项目目录文件/docs/1-开发环境搭建说明.docx 中也有更详细的介绍。

如今的软件开发需要大量的技术栈,因此构建本地开发环境来运行系统就成了一件比较复杂的事情,有时甚至成为推动一个开源项目顺利进行的第一难点,即只构建环境简单流畅,足以让人有兴趣继续了解。

因此,WebRose在这方面遵循了“低代码”的极简思想,并做出了很多创新。 可以实现零配置,一键解压红色版本,几分钟即可构建并运行。 更简单。

主要创新点如下:

后端是标准原生web技术的部署和开发(这也是为了实现PaaS在线编码),不用安装和使用NodeJs、npm、yarn、webpack等脚手架工具,只要了解一些基本的web原理即可,这很简单。 直接将需要的JDK、MySQL、Ant、TomCat等第三方软件上传到Gitee库中。 下载后解压后运行即可,这样就省去了各种启动命令中路径变量的配置,因为都是预先配置好并匹配好的。 。 该开源项目本身是Idea的标准Java项目,而不是Maven项目。 项目目录下预先设置了依赖的第三方ClassPath Jar包。 导出Idea后可以直接编译运行,而且编译速度快很多。 前端和后端项目合并在一个 Gitee 库中。 开发只需要一种开发工具。 每个人都可以同时编译前端和后端代码。 运行和发布时前端和后端分开部署。 直接编译Ant脚本来编译打包SpringBoo服务Jar包,无需Maven或其他复杂的打包工具,简单、透明、灵活、免费。

如果用简单的几句话来概括环境搭建的话:第一步解压Rar环境工具,第二步启动MySQL,第三步启动Web服务器,第四步编译启动Idea中的SpringBoot服务类。

之后就一切OK了,每一步都不需要做任何配置。

下面一一详细说明(因为内容说明了设计初衷,有些文字多了一点)。

Gitee克隆下载环境

直接在Idea中导出上述地址,或者从Gitee网站下载Zip文件并解压导出Idea。 这两种方法都可以,这里不再详细介绍。

创建本地目录

这是关键的第一步。 如果创建一个名为D:ABCWorkSpacewebrose(注意大小写)的二级目录,然后将项目导出到该目录下,则无需更改之前的任何配置(即零配置)即可运行一键解压,原因是之前一些命令中的path变量默认为这个路径名。

所以一开始,为了运行更流畅,建议先在这个默认目录下构建,熟悉之后再更改配置使用其他目录。

MySQL/JDK/Ant/TomCat等运行环境工具一键解压

Gitee下载完成后,整个项目目录结构如右图所示:

项目目录说明

其中,RunTimeEnv目录下有几个Rar文件,是运行环境工具。 理论上是可以直接解压的。

webpack 编写格式-在WebRose平台搭建本地开发环境(一键红色解压版,零配置)

但是,如果直接解压到当前Idea项目文件夹中,则会导致Idea建立一个索引文件。 因为文件太多,需要很长时间,但是这种文件可能是外部环境工具软件,不是项目开发的文件,所以不需要建索引,所以最好的办法是复制到项目外目录解压。 所以我特地在目录下写了一个CopyFile.cmd,将该文件复制到D:ABCWorkSpacewebroseEnvTemp目录下,双击这个命令,命令内容如下:

md D:ABCWorkSpacewebroseEnvTemp
copy .*.rar D:ABCWorkSpacewebroseEnvTemp

如果你手动创建这个临时目录,然后手动复制,其实是可以的。

之所以一定要调用这个目录名,也是因为前面命令参数中的路径也预设为这个名称,这样就可以实现零配置。

复制到临时目录后,您可以直接手动解压每个Rar文件到当前文件夹,无需任何其他配置。 截图如下:

外部环境工具临时目录

启动MySQL数据库

将上一步中的各个Rar解压后,启动MySQL就非常简单了。 由于这个MySQL已经解压成红色,所以直接进入MySQL5_1_57目录,双击执行命令【★★MyStart-MySQL★★.cmd】即可。 启动后界面如下:

MySQL启动成功界面

MySQL监听端口为5306,用户名为root,密码为111111,自带两个Demo演示库webrose_crm和webrose_ehr,请勿再次安装该库。

之所以将整个MySQL变成红色,并将解压后的版本上传到Gitee库,不像某些框架提供.sql文件,然后执行SQL安装到自己的MySQL数据库中,就是为了简化数据库环境。 ,每个人笔记本上的MySQL版本不同(字符集也可能不同),用户名和密码肯定不同。 之后还要有配置数据源等一堆注意事项,而且经常会出现各种小问题。 因此,上传整个库并直接解压是最稳定、最简单、最愚蠢的操作。

我之所以选择较低版本的MySQL,是为了减小整个rar文件的大小,让Gitee上传下载速度更快,而且熟悉之后,我可以导出自己喜欢的较高版本的MySQL,但是之后总之,这个版本的MySQL也是一个经典稳定的版本,完全足够用了。

MySQL目录可以复制到其他任意目录,双击启动命令即可,因为这是红色解压版,不需要配置。

启动 Web 服务器 (TomCat)

后端需要启动一个Web服务器。 在生产环境中,通常是专业的Web服务器,例如Ngnix或Apache。 开发环境可以根据个人喜好自由选择。 只要能运行,我们选择的是红色解压版的TomCat。 启动的方式是进入TomCat5.5.23目录,双击执行命令【MyStart-TomCat.cmd】(不做任何配置)。 启动后界面如下:

Web服务器TomCat启动界面

webpack 编写格式-在WebRose平台搭建本地开发环境(一键红色解压版,零配置)

TomCat监听端口为5001,启动后系统访问入口地址为:

:5001/webrose/framework/login.html,用户名/密码:xch/1

注意,必须同时启动SpringBoot前端服务才可以登录,否则加载登录图片时会报错。

之所以选择TomCat,主要是因为它是一个非常老式的Web/Java服务器,非常稳定可靠。 与某些Web服务器经常出现奇怪的缓存刷新等问题不同,配置也非常简单。

我们之所以选择较低版本的TomCat是因为Rar文件更小,Gitee上传下载速度更快,但是这个较低版本已经足够了webpack 编写格式,因为我们只将其用作Web服务器,而不是用作Java服务器。

之所以无需任何配置就能成功启动应用程序,是因为启动命令和Server.xml中配置的路径正是后端指出的预设目录名。 看截图就明白了:

TomCat启动命令

TomCat-服务器.xml

从截图中可以看出,零配置的前提是项目目录必须使用默认目录。 相反,如果你想换到其他目录,只需要改变这个配置的路径即可。

启动SpringBoot服务

由于该项目不是Maven项目,而是一个标准的Java项目,即ClassPath依赖的所有jar文件都放在ServiceProjectlib3目录下,所以在Idea中编译前端Java项目非常简单,不做任何配置,直接编译RebuildProject即可。

编译完成后,搜索cn.net.webrose.bs.WebRoseSpringRun类,直接运行,即在Idea中成功启动springBoot服务。

之所以无需任何配置就能成功启动并连接数据库,是因为MySQL的相关参数和之前数据源配置/appouter_config/webrose.xml中的内容是预设的匹配对。 截图如下:

SpringBoot服务启动成功界面

也就是说,如果不是提前把整个MySQL做成一键解压版本,而是使用自己的MySQL版本,至少要更改这个数据源的配置,各种错误可能就不会过去了。顺利和失败。 零配置。 这也是我们把整个第三方环境放在Gitee库中直接下载解压使用的原因,就是为了减少各种配置,减少出错和失败的机会。

至于为什么不使用Maven项目而是使用最标准、最简单的Java项目,虽然第一次必须使用Maven来搭建环境,但是搭建好之后,通常ClassPath的jar环境不会频繁变化,所以在使用的时候对于其他人来说,使用Maven依赖的jar包导入直接放在项目目录下,制作Java项目就方便简单多了。 导出后无需任何配置即可直接编译使用,编译速度快很多。 也有人说Maven只是第一次使用,只要ClassPath环境不变,没必要每次都使用。 理解这种辩证关系并不意味着否定Maven,而是有时用有时不用。

Ant编译生产环境SpringBoot服务包

以上就是在开发工具中搭建好环境,最后发布到生产环境,有一个编译打包的过程。

首先指出,即使是在开发环境中,前端和后端代码文件都在同一个Idea项目中,但是看起来执行是前后端分开进行的——结尾。

即后端是TomCat反向映射启动目录D:ABCWorkSpacewebroseWebProject,不使用前端文件目录。

前端编译所有src,只使用D:ABCWorkSpacewebroseServiceProject目录下的文件,不使用后端目录文件。

即文件合并在一个项目中,方便编写代码转移到Git上,即一个Git库,一个项目,一个开发工具就够了,前端和后端代码都可以写在同时一个工具界面。

之后我们甚至把每个产品、每个项目都放到这个项目中,只要我们在Ant脚本中设置我们要编译的产品和项目目录即可。

这是因为很多大中型软件公司和项目,由于人力资源有限,往往很难将前端和后端程序员分开,即一个程序员往往要写前端和后端——结束代码,甚至一个人也要同时负责多个项目。 项目和产品。

如果后端项目有一个Git库,前端项目是另一个,那么每个产品和项目都是一个Git库,后端开发使用VSCode开发工具,前端开发使用Idea开发工具,然后构建或切换各个产品和项目环境非常复杂,需要在不同的开发工具和项目之间来回切换。

因此,为了简化环境搭建,我们将前后端代码、各个产品和项目代码合并到一个项目中。 总共只有一个项目、一个环境,并且永远不会切换。

事实上,有人认为权限不分离,即每个人都拥有所有产品和项目代码权限,这是不安全的。 这个原则在一些大公司是存在的,但有时在中小企业和项目中并不是很关键。 如果出现这样的问题,自己重新设置目录也是可以的,只要将Ant编译打包脚本也做相应的更改即可。

如果只想编译某个产品的源代码,不想编译所有不相关的源代码,只需要将不相关的产品源代码暂时设置到普通目录下(不是Sources源代码目录)即可本地环境,这样编译速度就不会受到影响。

开发环境的前后端目录和原理已经讲清楚了,下面是如何发布生产环境。

后端发布:

后端发布很简单,直接将开发环境目录复制到生产环境中Web服务器(通常是Ngnix)的对应目录即可。 这是因为我们是原生Web框架,不需要使用WebPack做二次打包 Build ,只要复制目录文件即可,也就是说开发环境和生产环境看起来是一模一样的,这是标准的本机 Web。

这也是因为WebPack的二次封装与我们之前想要达到的PaaS在线开发的效果之间存在“结构性矛盾”。 PaaS在线开发需要实现立即保存并运行的效果,而不是先编译成另一种格式再上传,所以这就需要创新思路,回归原生的Web发布机制。

前端发布:

前端发布需要编译打包成SpringBoot服务包,即最终只需要直接运行一个Jar文件,整个环境的所有Jar都打包在这个Jar中。

通常的方式是使用Maven来打包,但是目录结构需要遵守Maven的很多规则(可能每个产品项目的前端和前端目录组合起来有问题),所以我们选择打包直接使用 Ant 脚本。 虽然Maven本质上是使用Ant执行的(Maven执行提示中可以看到AntTask字样),但两者是同一个东西,只不过自己写Ant脚本更加自由灵活,可以做更多创新性的设置项目目录。

webpack 编写格式-在WebRose平台搭建本地开发环境(一键红色解压版,零配置)

具体的Ant执行方法是直接双击运行命令ServiceProjectbuildjarMyAnt.cmd。

查看这个Ant命令的内容可以看出,这个命令执行的是配置文件ServiceProjectbuildjarMyBuilder.xml。

查看MyBuilder.xml的配置内容,可以很容易的理解它的原理(如果不清楚的话,可以先在网上找一些Ant的资料学习一下),虽然它是在不断的复制、编译、打包、复制。 。 最后启动SpringBoot服务打包的流程。 该文件的内容如下:

Ant脚本MyBuilder.xml开始部分内容

Ant脚本MyBuilder.xml末尾的内容

即Ant脚本仅使用5~6个最常用的功能命令,并且可以完全自行模拟Maven底层的执行过程,并自由组合和控制SpringBoot服务Jar包的输出,一切都是透明的。

最重要的是,自定义Ant脚本可以自由发挥,创新性地设置项目目录而不遵循Maven规则,然后根据自己的看法更改脚本进行打包,甚至可以做出一些更大的创新,例如WebRose有中间可以执行程序的函数先将所有源代码加密,然后打入最终Jar的某个目录下,出现异常时点击堆栈链接即可打开源代码(先显示)界面。 要在打包过程中实现这些自由扩展webpack 编写格式,使用Maven虽然不方便,但直接编写Ant脚本就灵活、自由了。

Ant实际执行截图如下:

Ant编译打包执行流程

Ant执行后,会在目录D:ABCWorkSpacewebroseEnvTemp_SpringBootServiceDeploy中生成最终文件,截图如下;

Ant最终输出文件

最后只需将生成的SpringBoot服务Jar文件上传到生产环境(一般是Linux)即可运行。

虽然Idea和Maven编译部署本质上都是使用Ant,但是下面是运行日志的截图,可以看到。 一个更灵活、更高、更低的维度。

虽然Idea编译也使用Ant

PaaS在线开发

后面提到的所有流程都是指在本地开发工具中进行开发,然后最终部署到生产环境,不过现在也流行PaaS云开发模式。 所谓PaaS,就是未来的开发者直接在云端进行配置和开发。 无需发布部署或重启服务器。

虽然陌陌小程序相当于一个PaaS开发平台,但开发者是在陌陌提供的嵌入式平台接口中进行开发的。 开发人员不知道也感觉不到操作系统、数据库、缓存服务器、Java服务器有哪些,它们是如何部署的,它们是如何启动和运行的。

WebRose平台就有这样的在线PaaS功能,即可以从头在线创建表格、菜单、前端和前端编码,保存后可以立即运行,无需将程序上传到生产环境发布。 也就是说,上面提到的所有流程都没有了。 系统只需部署一次,服务器永远不会部署和重启。 不再需要本地的开发工具和环境。 一切都是直接在线开发,开发者不需要。 学习如何编译、打包、发布、重启服务器等系统级知识,只关注应用层面的API。 工具界面如下:

PaaS在线开发接口

PaaS开发绝对是未来的发展趋势之一,特别适合需要快速响应、快速迭代、不方便频繁发布和服务器重启的中大型软件项目场景。

项目路径变更及配置参数

上面提到的零配置的前提是项目目录必须在D:ABCWorkSpacewebrose目录下,但如果只是想改变目录,需要改变什么命令配置呢?

MySQL数据库和Idea的Java项目编译是相对路径,不要改变任何配置项。

需要更改TomCat和Ant的四个文件中的变量。 详情如下:

TomCat5.5.23MyStart-TomCat.cmd,更改其中的JAVA_HOME变量

TomCat5.5.23confserver.xml,更改上下文路径

ServiceProjectbuildjarMyAnt.cmd,修改其中的JAVA_HOME和ANT_HOME

ServiceProjectbuildjarMyBuilder.xml,更改前三个变量路径Java_Home、FromDir、ToDir

另外,前端不仅有Spring自己的资源配置文件名,还有一个(且只有一个)配置文件appouter_config/webrose.xml,配置数据源所在的位置。

后端只有一个配置文件,就是WebProject/config.js,这里设置前端URL。

即整个平台的配置参数很少,而且非常简单。

总结

总而言之,WebRose构建本地开发环境,编译发布生产环境,非常简单且独特。 真正做到了一次下载、一次解压、零配置、即可运行。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 webpack webpack 编写格式-在WebRose平台搭建本地开发环境(一键红色解压版,零配置) https://www.wkzy.net/game/182528.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务