Question

我正在尝试在浏览器中运行noflo，并且它将成为Angular App。 Noflo文档提到了以下内容：

NoFlo项目也可以在Web浏览器中运行。您可以使用webpack工具创建NoFlo项目的浏览器可运行版本。

简而言之，制作NoFlo项目的浏览器构建涉及以下步骤：

使用fbp-manifest工具
查找所有已安装的浏览器兼容组件
生成一个自定义NoFlo组件加载器，它需要所有组件文件并注册它们以便加载NoFlo

使用应用程序入口点配置并运行webpack，将NoFlo的标准组件加载器替换为生成的自定义组件

为了自动完成这些步骤，我们提供了grunt-noflo-browser，这是我们用于构建自动化的Grunt任务运行器的插件。

我对这项任务的最短路径和最不痛苦的路径表示怀疑：

选项1：

我正在使用Angular CLI。 Webpack集成了角度cli，可以通过使用＆＃34; ng eject＆＃34;移动到基于webpack的配置。命令，然后我可以使用Grunt任务运行器来设置它。我以前从未使用过Grunt。我不知道它将如何运作。此后我将需要管理webpack配置进一步开发的另一个令人头痛的问题。

选项2：

与上述相同，但手动完成所有操作。消除了去Grunt路径的头痛。创建有关如何使用fbp-manifest工具以及如何生成自定义NoFlo组件加载器的新问题和复杂性。此外，维护webpack配置是进一步开发的附加任务。

选项3：

如果存在Angular CLI特有的任何其他路径

我将整合Noflo并为我的应用程序大量定制它。我的节点将是新的，并且没有服务器运行，我将拥有自己的IP推送系统。我们的想法是整合Noflo和Noflo UI，尽可能多地重用并开发其余部分。

我将很感激有关此事的任何建议。

由于

Answer 1

问题主要是我们需要为浏览器生成静态配置的NoFlo组件加载器，因为它们无法从文件系统中发现可用组件。

此功能过去与grunt-noflo-browser模块强烈耦合。

但是，截至今天，应该可以使用noflo-component-loader WebPack插件将NoFlo构建为任何现有WebPack设置的一部分。在WebPack module.rules中添加以下内容：

{
  // Replace NoFlo's dynamic loader with a generated one
  test: /noflo\/lib\/loader\/register.js$/,
  use: [
    {
      loader: 'noflo-component-loader',
      options: {
        // Only include components used by this graph
        // Set to NULL if you want all installed components
        graph: 'myproject/GraphName',
        // Whether to include the original component sources
        // in the build
        debug: false,
      },
    },
  ],
},

Noflo：前端是Angular 4 CLI时在浏览器中运行的步骤

1 个答案: