Spring Boot中Thymeleaf处理JavaScript遇WebPack/Babel问题求助

一、解决Thymeleaf不处理JS文件的问题 #

静态文件夹下的资源会被Spring直接返回，不会经过Thymeleaf模板解析，需调整文件位置和配置：

• 移动JS文件位置：把需要Thymeleaf处理的JS从src/main/resources/static移到src/main/resources/templates/js目录下。
• 配置Thymeleaf JS模板解析器：新增针对JS文件的模板解析器，设置模板模式为TEXT（避免HTML解析规则干扰）：

@Configuration
public class ThymeleafConfig {
    @Autowired
    private ApplicationContext applicationContext;

    // 原有HTML模板解析器
    @Bean
    public SpringResourceTemplateResolver htmlTemplateResolver() {
        SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
        resolver.setApplicationContext(applicationContext);
        resolver.setPrefix("classpath:/templates/");
        resolver.setSuffix(".html");
        resolver.setTemplateMode(TemplateMode.HTML);
        resolver.setCharacterEncoding("UTF-8");
        resolver.setOrder(0);
        return resolver;
    }

    // 新增JS模板解析器
    @Bean
    public SpringResourceTemplateResolver jsTemplateResolver() {
        SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
        resolver.setApplicationContext(applicationContext);
        resolver.setPrefix("classpath:/templates/js/");
        resolver.setSuffix(".js");
        resolver.setTemplateMode(TemplateMode.TEXT);
        resolver.setCharacterEncoding("UTF-8");
        resolver.setOrder(1);
        return resolver;
    }

    @Bean
    public SpringTemplateEngine templateEngine() {
        SpringTemplateEngine engine = new SpringTemplateEngine();
        engine.addTemplateResolver(htmlTemplateResolver());
        engine.addTemplateResolver(jsTemplateResolver());
        return engine;
    }
}

• 配置ViewController映射：让JS请求指向Thymeleaf模板：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 匹配 /js/xxx.js 请求，映射到 templates/js/xxx.js 模板
        registry.addViewController("/js/*").setViewName("js/$1");
    }
}

二、解决Babel对Thymeleaf语法报错的问题 #

Babel会将[[#{secret}]]识别为无效JS语法，推荐两种可行方案：

方案1：使用全局变量传递Thymeleaf变量（优先推荐） #

完全避免JS中的Thymeleaf语法，配置简单：

1. 在HTML模板中通过Thymeleaf注入全局变量：

<script th:inline="javascript">
    // 把需要传递的变量挂载到window全局对象
    window.app = {
        secretMessage: [[#{secret}]]
    };
</script>
<!-- 引入WebPack打包后的静态JS文件 -->
<script src="/js/bundle.js"></script>

2. 在源JS文件中直接使用全局变量：

// 无Thymeleaf语法，Babel可正常编译
const secretMessage = window.app.secretMessage;

方案2：WebPack阶段替换占位符 #

若必须在JS文件中保留Thymeleaf语法，需在WebPack构建时做语法转换：

1. 安装string-replace-loader：

npm install string-replace-loader --save-dev

2. 修改WebPack配置，把Thymeleaf表达式替换为占位符：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          {
            loader: 'string-replace-loader',
            options: {
              // 正则匹配 [[#{xxx}]] 格式
              search: '\\[\\[#{(.*?)}\\]\\]',
              // 替换为自定义占位符
              replace: '__THYMELEAF_$1__',
              flags: 'g'
            }
          }
        ]
      }
    ]
  }
};

3. WebPack打包后，用脚本把占位符替换回Thymeleaf表达式：

// 示例Node.js脚本 replace-placeholders.js
const fs = require('fs');
const path = require('path');

const jsPath = path.resolve(__dirname, 'dist/js/bundle.js');
let content = fs.readFileSync(jsPath, 'utf8');
content = content.replace(/__THYMELEAF_(.*?)__/g, '[[#{$1}]]');
fs.writeFileSync(path.resolve(__dirname, 'src/main/resources/templates/js/bundle.js'), content);

运行脚本后，JS文件即可被Thymeleaf正常解析。

内容的提问来源于stack exchange，提问作者Slevin