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

【问题标题】：Overwrite an existing plugin JS in Shopware 6在 Shopware 6 中覆盖现有的插件 JS
【发布时间】：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/… 并注册一个别名，那就很简单了

标签： javascript shopware shopware6

【解决方案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';

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

【讨论】：

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