2

我正在尝试在浏览器中运行 noflo，但它会是一个 Angular 应用程序。Noflo 文档提到以下内容：

NoFlo 项目也可以在网络浏览器中运行。您可以使用 webpack 工具创建 NoFlo 项目的浏览器可运行构建。

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

使用 fbp-manifest 工具查找所有已安装的浏览器兼容组件

生成一个自定义 NoFlo 组件加载器，该加载器需要所有组件文件并注册它们以供 NoFlo 加载

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

为了自动化这些步骤，我们有 grunt-noflo-browser，一个用于 Grunt 任务运行器的插件，我们用于构建自动化。

我对完成这项任务的最短和最痛苦的路径有疑问：

选项1：

我正在使用 Angular CLI。Webpack 与 Angular cli 集成，可以使用“ng弹出”命令将其移动到基于 webpack 的配置，然后我可以使用 Grunt 任务运行器进行设置。我以前从未使用过 Grunt。我不知道它会如何工作。之后我将不得不管理 webpack 配置以进一步进入开发，这是另一个令人头疼的问题。

选项 2：

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

选项 3：

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

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

我将不胜感激有关此的任何建议。

谢谢

4

1 回答 1

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,
      },
    },
  ],
},
于 2017-10-27T17:30:10.600 回答