如何在Spring Boot Web应用中安装并访问node_modules第三方插件

嘿，我来一步步帮你搞定在Spring Boot里用Node.js第三方插件的事儿！其实核心就是先把插件装到node_modules，再让Spring Boot能找到这些资源，最后在页面里用上就行。

第一步：先给项目搭好Node.js环境 #

首先，你的Spring Boot项目得有放前端资源的地方，默认是src/main/resources/static或者src/main/resources/public——要是没有的话，直接创建一个就行，推荐用static目录。

然后打开终端，进到项目根目录，初始化一个npm项目：

npm init -y

这个命令会自动生成package.json文件，以后管理插件依赖全靠它了。

第二步：把第三方插件装到node_modules里 #

接下来就可以装你需要的插件啦！比如你想用axios发请求，或者lodash处理数据，直接在终端敲命令就行：

npm install axios --save

等命令跑完，项目根目录就会出现一个node_modules文件夹，你要的插件和它的依赖都在这儿了。

第三步：让Spring Boot能访问到node_modules里的资源 #

默认情况下Spring Boot不会主动暴露node_modules的资源，所以得做点配置，这儿有三种方法，你选适合自己的：

方法1：手动复制（简单粗暴，适合小插件） #

如果插件体积不大，或者你只需要它编译好的压缩文件（比如.min.js），直接从node_modules/[插件名]/dist（或者对应目录）里把需要的文件复制到src/main/resources/static/js或者static/css下面。比如把axios的axios.min.js复制到static/js，之后在页面里这么引用：

<script src="/js/axios.min.js"></script>

方法2：配置资源映射（灵活，不用复制文件） #

要是不想复制文件，想直接访问node_modules里的资源，可以写个Spring Boot配置类，把node_modules映射成可访问的路径：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 把项目里的node_modules目录映射到/webjars/npm/**这个路径
        registry.addResourceHandler("/webjars/npm/**")
                .addResourceLocations("classpath:/node_modules/");
    }
}

配置完之后，在页面里就能通过/webjars/npm/[插件名]/[具体文件路径]访问资源了，比如引用axios：

<script src="/webjars/npm/axios/dist/axios.min.js"></script>

⚠️ 注意：如果你的node_modules在项目根目录，记得在Maven的pom.xml里配置一下，让它打包的时候把node_modules包含进去：

<build>
    <resources>
        <resource>
            <directory>node_modules</directory>
            <targetPath>node_modules</targetPath>
        </resource>
        <resource>
            <directory>src/main/resources</directory>
        </resource>
    </resources>
</build>

方法3：用构建工具打包（生产环境首选） #

如果你的前端依赖多，或者需要模块化开发，推荐用Webpack、Vite这类工具把依赖打包成压缩后的bundle文件，再放到Spring Boot的静态资源目录。比如用Vite的话，改一下vite.config.js：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    // 把打包后的文件输出到Spring Boot的static目录
    outDir: '../src/main/resources/static',
    emptyOutDir: true
  }
});

然后运行npm run build，打包好的文件就自动进到static目录了，直接引用打包后的文件就行——这样不仅加载更快，还不会暴露node_modules的结构，更安全。

第四步：验证一下能不能用 #

不管用哪种方法，最后都可以在你的Thymeleaf、JSP或者HTML页面里写点测试代码，比如用axios发个请求：

<script>
    axios.get('/api/data')
         .then(res => console.log(res.data))
         .catch(err => console.error(err));
</script>

打开浏览器控制台，看看能不能拿到数据，要是能的话就搞定啦！

内容的提问来源于stack exchange，提问作者Fathima Linsa K