创建全栈 Java WS, Angular.JS, TDD/BDD, maven Eclipse 项目

Question

在设置项目以执行完整 Java、Angular.js、TDD/BDD 堆栈时遇到了一些问题。到目前为止，这些问题还不是障碍，但它们可能会变成障碍。

我将 Eclipse 4.6.0 Neon 与 WTP、JSDT 和 Angular 插件一起使用。

我现在看到的 2 个危险信号是：

在 "Javascript Resources" 文件夹中，Eclipse 显示 "ECMA 3 browser support library"。这肯定是 ECMAscript 5 吧？（如果不是 6！）由于 Neon 刚刚问世，我什至无法更改它有点令人惊讶，因为我可以在项目方面对话框中更改 Java 版本。
HTML 和 CSS 文件埋在 src/main/webapp 中。我不应该点击 3 次才能找到它们，它们应该像 Java 或 JS 文件一样容易点击。为什么在 Project Explorer 视图中我的项目中没有 "Web Resources" 来匹配 "Java Resources" 和 "Javascript Resources"？

就像我在这一点上说的，这些/似乎/都不重要，但我不想在未来的问题上浪费大量时间，并发现我应该以不同的方式设置我的项目。我也很高兴听到这是不可能的，我应该将这些技术拆分成单独的项目，比如一个只用于 Web 服务，一个用于 JS。按照这个思路得出结论，我也很高兴听到我应该放弃 Eclipse 并回到命令行。

更新2016-08-01 Eclipse 项目陷入困境，陷入了一些永无止境的过程，在我创建了一个 bower.json 项目文件后，我无法停止也无法识别。

我会将 Java 和 JS 分开到单独的项目中，然后从那里拿走。没有必要将它们放在一起，除了只有一个可部署工件而不是 2 个的好处，现在这似乎没什么大不了的。

Answer 1

第 2 项的答案 [src/main/webapp 需要点击 3 次才能深入了解（与 Java 文件不同）]：

应该可以在/webapp/文件夹上右击，然后select"Build Path">"Use as Source Folder"，然后就可以同级显示了正如 Java (src/main/java) 文件夹一样，您可以一键深入了解它。

这是它在 Eclipse 'Package Explorer' 中的样子：

Answer 2

我发现在 Eclipse 中的单独项目中设置 Java 脚本/Angular.js、HTML 和 CSS 更容易，因为 Eclipse 项目配置可能去了当我不断地猛击它时，沿着小溪向上游。

这意味着必须有 2 个可部署工件，但目前这是可以接受的。当谈到生产时，如果随着 Eclipse JS 工具的成熟它变得更容易，我会重新组合到一个项目中。

网上所有的 google top-ranking JS / Angular HOWTO 都假设根本没有 java 或 maven，但我有一个各种 use-cases，我希望 JSP 文件中的 HTML 而不是静态文件，因此我创建了一个项目作为 Javascript、Java 和 Maven。

此外，还有一个很棒的 Maven 插件 frontend-maven-plugin

  <plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.0</version>
  </plugin>

即引用：

Maven-node-grunt-gulp-npm-node-plugin to end all maven-node-grunt-gulp-npm-plugins.

所以这将负责 browserify 和 grunt 或 gulp 任务的持续集成。

很容易拆分 HTML 和 CSS 资源并将它们放入为 Eclipse 动态 Web 模块自动创建的 WebContent 目录中。这使得它们只需在文件夹树中单击鼠标即可访问（与 src/main/webapp 中的 3 次单击相比）。

事实上，使用 maven-war-plugin 可以很简单地告诉 Eclipse 从哪里 assemble 各个部分：

  <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-war-plugin</artifactId>
    <version>2.6</version>
    <configuration>
      <failOnMissingWebXml>false</failOnMissingWebXml>
      <warSourceDirectory>${project.basedir}/WebContent</warSourceDirectory>
      <webResources>
        <webResource>
          <directory>${project.basedir}/src/main/javascript</directory>
        </webResource>
      </webResources>
    </configuration>
  </plugin>

为了引入 ECMAScript 5 或 6 支持，我安装了 Tern Eclipse plugin，它并没有完全接管项目配置，因为 Eclipse 仍然在其属性对话框中显示 ECMA 3 浏览器库，但它提供了代码完成和验证。

显然，使用 IntelliJ 整个事情会更容易，但希望这是 Eclipse 项目配置中的最后一个大 session，我需要做一段时间，所以我不会去那里然而。不知道 Netbeans。

2016-09-23 更新：

Eclipse 项目配置不是很稳定。起初 Angular 插件找不到我的 Angular 代码并在 HTML 中标记错误，除非 Java 脚本与 HTML 是。我发现在我从头开始重新创建 Eclipse 项目后，这些错误就消失了。

Eclipse 执行的默认验证也不好。他们检查 node_modules 和 bower_components 中的所有内容，除非关闭或使用过滤器重新配置以排除这些目录（有超过 25 个单独的验证配置要做）。

此外，Java脚本大纲视图在尝试扫描第三方库（如 angular.min.js 或 d3.min.js 中的代码时会中断 - 4.6.1 版本到期在今年 2016 年 9 月底对此进行了修复。

创建全栈 Java WS, Angular.JS, TDD/BDD, maven Eclipse 项目

Creating a full stack Java WS, Angular.JS, TDD/BDD, maven Eclipse project

javascript

angularjs

html

maven

eclipse-neon