jquery - 包括带有 Spring Boot 的 ES6 和 Webpack

Question

我有一个 Spring Boot 应用程序要在现有 Tomcat 服务器中修改和部署。 App使用1.5.4版本，前端使用thymeleaf、Jquery(4)和bootstrap。在某些情况下，前端直接访问 Controller 和其余 API。

我的生产部署确实有资源限制，没有可用的单独服务器，应用程序需要在 tomcat 中运行。无法选择分离前端和后端并使用前端节点服务器。

我想将 webpack 或 babel/es6 包含到前端脚本中(以利用这些功能并使用 Promises 等功能) - 解决一些复杂的 AJAX 调用回调异步问题。我用谷歌搜索并阅读，有很多选择。感谢有关如何执行此操作的任何指导和步骤

Answer 1

可能有几种方法可以做到这一点，但如果您碰巧使用 Gradle，您可以尝试以下解决方案:

1. 在 build.gradle 脚本中添加节点插件:

   plugins {
     id "com.moowork.node" version "1.2.0"
   }
   

2. (可选)配置插件(请参阅:https://github.com/srs/gradle-node-plugin/blob/master/docs/node.md)

   node {
     version = '8.11.3'
     npmVersion = '5.6.0'
     download = true
   }
   

3. 定义运行 webpack 的 npm 任务并确保它在处理资源之前执行

   task webpack(type: NodeTask, dependsOn: 'npmInstall') {
       script = project.file('node_modules/.bin/webpack')
   }
   
   processResources.dependsOn 'webpack'
   

4. 配置 webpack 以使其输出到某个特定文件夹。为了与 gradle 保持一致，您可以将其输出到 build/ 文件夹中的某个文件夹:

   const path = require('path');
   const ROOT = path.resolve(__dirname, 'src/main/webapp');
   const DEST = path.resolve(__dirname, 'build/fe');
   
   module.exports = {
     entry: [
       path.resolve(ROOT, 'js/scripts.js')
     ],
     output: {
       path: DEST,
       filename: 'dist/bundle.js'
     },
     // ...
   }
   

5. 确保 webpack 的输出随后被 gradle build 作为资源处理:

   processResources {
     with copySpec {
       from "${buildDir}/fe"
       include "**/*.js"
       into "static"
     }
   }
   

这是一个示例存储库，演示了完整的解决方案:

https://github.com/xmcax/thymleaf-demo