Symfony 6项目如何正确引入node_modules中的前端依赖

Symfony 6 默认通过 Webpack Encore 处理前端资源打包，天然支持直接引入node_modules下的依赖，不需要手动复制文件到public目录，也不需要依赖CDN。之前引入不生效是因为导入路径错误、缺少初始化调用、未执行构建流程导致的，按以下步骤配置即可：

1. 确认依赖已正确安装 #

在项目根目录执行命令安装Feather图标库，已安装可跳过：
npm install feather-icons --save

2. 修正assets/app.js的导入与逻辑 #

你之前写的import './feather'是错误写法：相对路径./会指向项目assets/目录下的本地文件，不会读取node_modules下的npm包，导入npm包直接写包名即可。
另外Feather导入后不会自动执行图标替换，必须手动调用初始化方法，最终app.js代码如下：

import './styles/app.css';

// start the Stimulus application
import './bootstrap';
// 导入node_modules下的feather-icons包
import feather from 'feather-icons';

// 页面DOM加载完成后执行图标渲染
document.addEventListener('DOMContentLoaded', () => {
    feather.replace();
});

如果你使用Symfony 6.3+默认自带的Turbo路由，DOMContentLoaded仅在首次页面加载时触发，页面无刷新跳转时不会执行，需要额外绑定Turbo渲染事件保证图标正常替换：

document.addEventListener('turbo:render', () => {
    feather.replace();
});

3. 确认模板正确引入打包后的资源 #

打开全局基础模板（一般为templates/base.html.twig），确认在javascript块中引入了app入口的构建产物：

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
{% endblock %}

4. 执行资源构建 #

开发环境下执行实时编译命令，修改前端资源会自动重新打包：
npm run watch
生产环境部署时执行生产构建，会自动压缩合并资源：
npm run build
构建完成后，Webpack Encore会自动把你用到的node_modules依赖代码打包到public/build/目录下的输出文件中，全程不需要手动操作public目录下的资源文件。

验证效果 #

直接在模板中按照Feather的语法写图标标签即可，例如：

<i data-feather="home"></i>
<i data-feather="star"></i>

页面加载后会自动替换为对应的SVG图标。

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