在Symfony捆绑包之间共享客户端代码

问题描述

这些年来，我积累了许多自定义的Symfony捆绑软件（用于文件管理，电子邮件，错误，调试，API等）。 现在，我想建立一个统一的界面，其中每个捆绑包都可以公开一个或多个视图。

因此，我为此创建了一个VueJS应用，我希望它能成为我的EssentialsBundle的一部分，同时仍然可以被其他捆绑软件扩展。

目标行为是：

在安装工具包的任何Symfony捆绑软件时，EssentialsBundle是一个依赖项，因此也要安装。 该捆绑包公开了一条/_editor路由，该路由启动了编辑器。现在看起来像这样：

布局由数量不确定的面板组成，您可以随意移动，每个面板都是VueJS组件。

如果安装时说DebugBundle，它将在编辑器中添加一个面板，显示实时日志。

如果安装MailBundle，它将添加一个面板，该面板显示后台打印程序的状态，另一个面板显示最新发送的邮件，等等。

对我而言，棘手的部分是每个捆绑包都有自己的Webpack版本，而且我很难弄清楚如何在两个版本之间共享代码。

我可以轻松地包含与安装在编辑器的树枝模板中的包相对应的<script></script>标签。但是，要使构建的行为像“一个”一样，我会陷入困境。

更具体地说，我需要三件事：

1）共享库

我希望VueJs仅包含在EssentialsBundle中，同时仍可被创建面板的其他捆绑包使用。 如果我什么也不做，VueJS将捆绑在每个捆绑包中。 如果我添加：

externals: {
    vue: 'Vue',[...]
}

对于Webpack配置，VueJS变为未定义。我想这是因为它应该作为全局变量使用，而不是因为编辑器以这种方式（在TypeScript中）将其导入：

import Vue from 'vue';

其他捆绑软件可能还需要完全不属于EssentialsBundle一部分的库。

2）共享编辑器代码库

其他捆绑包可以使用编辑器代码库的任何部分（如接口）很重要：

import PanelInterface from 'essentials-bundle/editor/panel.interface';

[...]

或服务（我使用Inversify进行依赖项注入）：

import { inject,injectable } from "inversify";
import { HttpService,HttpServiceSymbol } from 'essentials/network/http.service'; // Client toolkit,not part of any bundle
import { Editor,EditorSymbol} from 'essentials-bundle/editor'; // Part of the "EssentialsBundle"

@injectable()
export class MyService
{
    public constructor(@inject(EditorSymbol) private editor: Editor,@inject(HttpServiceSymbol) private http: HttpService) {

    }
}

我可以创建一个别名，以使essentials-bundle前缀解析为EssentialsBundle脚本目录，但是代码将在每个版本中重复。

3）共享“捆绑销售”代码

在最后一个代码段中，我加入了HttpService，它是我的客户端工具的一部分，完全与Symfony无关：

import { HttpService,HttpServiceSymbol } from 'essentials/network/http.service';

essentials是开发项目的assets/essentials文件夹的别名。

我不知道它的处理方式是否应与库的处理方式不同，因此在此将其包括在内。 问题在于每个捆绑包可能需要其中一部分工具，而其他部分则不需要。

例如，会发生什么情况

• essentials-bundle根本不使用HttpService
• debug-bundle使用它
• mail-bundle使用它

代码必须在debug和mail之间重复，因为客户端资源是在部署分发包之前编译的，并且debug-bundle可以在没有mail-bundle的情况下导入，反之亦然

我可以将每个捆绑软件需要的所有内容都导入essentials-bundle中，但这很丑陋而且不适用，因为我还打算允许使用该应用程序专用的面板扩展编辑器。

我见过DLLPlugin，但无法正常使用。它会生成格式错误的manifest.json。

我也曾尝试使用Webpack External Import，但它似乎不适用于Webpack 4。

任何建议将不胜感激。 谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）