特若网络 Java Web前端技术-GWT浅析

Web前端技术-GWT浅析

因为我从事的公司前端技术用的是GWT,所以对这个技术算是比较了解一些,工作中难免有新人刚接触这个技术,总是会问…

因为我从事的公司前端技术用的是GWT,所以对这个技术算是比较了解一些,工作中难免有新人刚接触这个技术,总是会问到如何去操作,所以决定去写此文来帮助未接触过GWT的人来更快的使用GWT。

  • GWT的全称是 Google Web Toolkit
  • GWT的开发模式是使用Java语言开发,经编译器编译为Javascript。
  • GWT的源码是Java,但他跟后台没有关系,他的最终产物是Javascript。

上面是我要强调的几点内容,下面聊聊如何搭建开发环境。

下面两种方式都可以实现调试和打包,我挑选了一些常用和重要的细节进行描述,有没描述到的,可以留言给我,或者百度查找相关资料。

插件方式调试和打包

在eclipse上安装GWT插件,在顶部菜单上找到help->Eclipse Marketplace

搜索GWT关键字,安装第一个选项中的GWT Eclipse Plugin 3.0.0

安装成功后,准备工作就完成了。下面假设你已经有了一个GWT工程来调试,

这里拿一个maven项目来做例子,后面有需要的话,我会演示非maven工程的操作,这里就不做介绍了。

首先把项目导入到eclipse中。

然后右键项目选中Properties进入如下界面,打勾Use GWT。然后就可以调试或者打包了。

下面先说调试的配置,右键工程,按下图进行操作

-startupUrl http://localhost:8080/poip/ -logLevel INFO -noserver -remoteUI "${gwt_remote_ui_server_port}:${unique_id}" -codeServerPort 9997 com.xxx.gwt.main.poip-gwt-client -war D:\webapp\poip-webserver

-startupUrl 应用访问地址

-war 应用存储位置

com.xxx.gwt.main.poip-gwt-client为模块文件路径

此时应确保tomcat或承载你的后台服务的应用已经启动,并且通过 startupUrl 可以访问到,然后点击debug开始调试。

右键项目选中如下菜单进行打包,这里有两个地方的配置经常用到,一个是vm大小,调大可以加快编译速度,output style选项来控制编译模式,下面是对这几种模式的介绍。

Obfuscated  执行混淆操作
Pretty      选项不进行混淆,输出格式化的JavaScript
Detailed    也不进行混淆,输出的变量名和类名都附带原始Java类的详细信息

通过上面的操作已经能够基本满足编译和打包的需求,下面介绍一下不用在eclipse中配置直接使用maven的方式进行打包。

Maven方式调试和打包

该模式下,是不需要把工程导入eclipse的。确保pom中有下面的gwt构建插件配置。

<build> 
  <plugins> 
    <plugin> 
      <groupId>org.apache.maven.plugins</groupId>  
      <artifactId>maven-compiler-plugin</artifactId>  
      <version>3.2</version>  
      <configuration> 
        <source>${jdk.source.version}</source>  
        <target>${jdk.target.version}</target> 
      </configuration> 
    </plugin>  
    <plugin> 
      <groupId>net.ltgt.gwt.maven</groupId>  
      <artifactId>gwt-maven-plugin</artifactId>  
      <version>1.0-rc-8</version>  
      <extensions>true</extensions>  
      <configuration> 
        <classpathScope>compile</classpathScope>  
        <moduleName>com.xxx.gwt.main.poip-gwt-client</moduleName>  
        <moduleShortName>poipgwtclient</moduleShortName> 
      </configuration> 
    </plugin> 
  </plugins> 
</build>

注意:上面的<configuration>中配置,moduleName对应的是项目中的下图标记的文件,moduleShortName对应的是模块文件中rename-to的配置。

上面的内容只是对一个gwt+maven工程的部分细节提示,下面再补充几个可能用到的maven配置。

<style>
Script output style: OBFUSCATED, PRETTY, or DETAILED.
• Type: java.lang.String
• Required: No
User Property: gwt.style
<jvmArgs>
Arguments to be passed to the forked JVM (e.g. -Xmx)
• Type: java.util.List
• Required: No

上面这些参数已经基本可以满足日常需要,如果需要了解更多的参数可以查看我的另一篇文章:http://www.gjxblog.com/2020/03/13/336/ 。下面进行编译,命令行切到当前工程路径下,执行下面命令:

mvn compile
mvn gwt:compile

执行完成后就得到目标js文件了。

本文原创,禁止转载。http://www.gjxblog.com/2020/03/11/280/

作者: GJX

广告位
联系我们

联系我们

邮箱: gjx.xin@qq.com

说明:投稿请邮箱联系我,可获得5-50的酬劳。
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部