如何在我的自定义主题中包含自定义 js 文件？

Posted 2023-02-16

【中文标题】如何在我的自定义主题中包含自定义 js 文件？

【英文标题】：How to include custom js file in my custom theme?

【发布时间】：2021-01-05 20:44:42

【问题描述】：

使用 OroCommerce v4.1.8（最新稳定版）。

我创建了我的自定义主题（从“默认”主题扩展），它可以正确呈现（所有 css 都已加载并按定义应用），但我的自定义 JS 文件似乎未包含在页面中。下面是我的 \Resources\views\layouts\mytheme\config\jsmodules.yml 文件：

    shim:
        jquery:
            expose:
                - $
                - jQuery
        magnificPopup:
            imports:
                - jQuery=jquery
        owlCarousel:
            imports:
                - jQuery=jquery
            exports: owlCarousel
    aliases:
        magnificPopup$: mytheme/js/magnific-popup.min
        owlCarousel$: mytheme/js/owl.carousel.min
        my-main$: mytheme/js/main
    dynamic-imports:
        mytheme:
            - magnificPopup
            - owlCarousel
            - my-main

在网络服务器上，我可以看到在 /var/www/oroapp/public/layout-build/mytheme/chunk 文件夹下创建了一个已编译的 mytheme.js 文件，但是查看主页的 html，没有加载此文件的行/引用。

请告知我遗漏了什么或如何解决此问题？

【参考方案1】：

OroCommerce 使用 Webpack 构建 JS 依赖项。默认情况下，所有配置的 javascript 依赖文件都合并到一个文件中，例如：

<script src="/layout-build/mytheme/app.js"></script>

mytheme 是您的主题名称。 要在 ES6 模块中使用上述依赖项之一，您必须使用 import 语句或使用 require 函数手动要求它。

更多详情请查看JavaScript Modularity in the OroCommerce Application的官方文档。