老高的网络日志

因为我从事的公司前端技术用的是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>

注意：上面的中配置，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.gaojunxin.cn/2020/03/13/336/ 。下面进行编译，命令行切到当前工程路径下，执行下面命令：

mvn compile
mvn gwt:compile

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