在 Symfony 6 中使用 node_modules

Question

我想在我的 Symfony 6 项目中使用一些

node_modules

。例如，羽毛图标。但我无法弄清楚如何在不将这些文件复制到公共文件夹或使用 CDN 的情况下包含这些文件。

我尝试使用以下方法将文件导入到

app.js

：

import './feather';

可悲的是，这似乎不起作用。谁能帮我解决这个问题，因为我也找不到任何相关的谷歌搜索结果。

编辑 这就是我的

app.js

目前的样子：

import './styles/app.css';

// start the Stimulus application
import './bootstrap';
import feather from 'feather-icons'; // <-- added line from comment

Answer 1

我就是这样做的。我想创建一个单独的 js 文件，其中包含仅包含在一个模板中的日历插件的代码。

1. 在 webpack.config.js 中

.addEntry('js-year-calendar', './assets/js-year-calendar.js')
.addAliases({
            'js-year-calendar': resolve(__dirname, './node_modules/js-year-calendar'),
        })

2. 在我创建的文件中“assets/js-year-calendar.js”：

import 'js-year-calendar/dist/js-year-calendar.min.css'; 
import Calendar from "js-year-calendar/dist/js-year-calendar.min";

3. 在 twig 文件中需要的地方添加了必要的代码：

{% block javascripts %}
    {{ encore_entry_script_tags('js-year-calendar') }}
    <script>

        {% if subscription %}
        document.addEventListener("DOMContentLoaded", function() {
            const calendar = new Calendar('#calendar');
            calendar.setStyle('background');
            calendar.setEnableRangeSelection(false);
            calendar.setDataSource([
                {
                    startDate: new Date('{{ subscription.currentPeriodStart|date('c')  }}'),
                    endDate: new Date('{{ subscription.currentPeriodEnd|date('c')  }}')
                }
            ]);
        });
        {% endif %}
    </script>
{% endblock %}

{% block stylesheets %}
    {{ encore_entry_link_tags('js-year-calendar') }}
<style>
    #calendar {
        display: inline-block;
        vertical-align: top;
    }
</style>
{% endblock %}