在 Shopware 6 中覆盖现有的插件 JS

Posted 2023-02-16

【中文标题】在 Shopware 6 中覆盖现有的插件 JS

【英文标题】：Overwrite an existing plugin JS in Shopware 6

【发布时间】：2021-10-10 16:16:46

【问题描述】：

我目前正在尝试从现有插件覆盖 javascript 文件。

我一直在关注documentation，但我正在为 JS 类覆盖的路径而苦苦挣扎。

文档中有一个示例代码：

import CookiePermissionPlugin from 'src/plugin/cookie/cookie-permission.plugin';

export default class MyCookiePermission extends CookiePermissionPlugin 

所以我实现了以下代码：

import QuantityField from 'src/plugin/FilterRangeSlider/filter-range-slider.plugin';

export default class ExampleQuantityField extends QuantityField 

此代码对我不起作用，因为原始文件位于供应商目录中，而我的插件位于自定义目录中。尝试编译时（例如bin/build-storefront.sh）我收到以下错误消息：

找不到模块：错误：无法解析“/custom/plugins/ExampleProductFilter/src/Resources/app/storefront/src 中的“src/plugin/FilterRangeSlider/filter-range-slider.plugin” /filter-range-slider'

知道如何按照文档中的说明导入该类吗？

【问题讨论】：

在您的示例中，您粘贴来自 CookiePermissionPlugin 的代码 - 在您的错误消息中，它是插件内的 FilterRangeSlider。请显示您拥有的确切代码，而不是文档中写的内容。

@ChristopherDosin MweisIMI 编辑了这个问题。我想从../../../../(no clue how many times)/../vendor/store.shopware.com/..... 导入会起作用，但这是一个干净的解决方案吗？

我想如果插件能像这样扩展 webpack 配置：developer.shopware.com/docs/guides/plugins/plugins/… 并注册一个别名，那就很简单了

【参考方案1】：

有 - 我相信 - 没有更简单的方法可以做到这一点。

如果每个插件都按照中的描述扩展 webpack 配置

https://developer.shopware.com/docs/guides/plugins/plugins/administration/extending-webpack

const path = require('path');

module.exports = () => 
    return 
    resolve: 
        alias: 
            MmeesRangeSliderPro: path.join(__dirname, '..', 'src')
        
    
    ;
;

别名可以用来代替插件根。

但事实并非如此，所以以下是 不 工作：

import QuantityField from 'MmeesRangeSliderPro/plugin/FilterRangeSlider/filter-range-slider.plugin';

您可以在Resources/app/storefront/webpack.config.js 的底部添加console.log(webpackConfig) 来验证这一点。

   alias: 
      src: '/home/user/example/projects/example.de/vendor/shopware/storefront/Resources/app/storefront/src',
      assets: '/home/user/example/projects/example.de/vendor/shopware/storefront/Resources/app/storefront/assets',
      jquery: 'jquery/dist/jquery.slim',
      scss: '/home/user/example/projects/example.de/vendor/shopware/storefront/Resources/app/storefront/src/scss',
      vendor: '/home/user/example/projects/example.de/vendor/shopware/storefront/Resources/app/storefront/vendor'
    

还有那些不允许定位模块的。

【参考方案2】：

Node.js 提供了一堆内置的文件系统功能。 __dirname 指向根目录。

所以，这应该可行。

import QuantityField from `$__dirname/vendor/store.shopware.com/mmeesrangesliderpro/src/Resources/app/storefront/src/script/filter-range-slider.plugin`

【讨论】：

是否有类似插件根变量的东西，为了使其可移植，插件是通过管理面板而不是作曲家安装的吗？

我似乎工作了。使用反引号我得到一个语法错误，没有“无法解析”

【参考方案3】：

我目前的解决方案不是很干净...

import QuantityField from '../../../../../../../../../vendor/store.shopware.com/mmeesrangesliderpro/src/Resources/app/storefront/src/script/filter-range-slider.plugin';

是否有任何插件根变量或类似的东西？

【讨论】：

想知道有没有更好的办法，避开这一系列的“../”