Noflo：当前端为 Angular 4 CLI 时，在浏览器中进入运行的步骤

Question

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

NoFlo projects can also run in web browsers. You can use the webpack tool create a browser-runnable build of a NoFlo project.

In nutshell, making a browser build of a NoFlo project involves the following steps:

Find all installed browser-compatible components using the fbp-manifest tool

Generate a custom NoFlo component loader that requires all the component files and registers them for NoFlo to load

Configure and run webpack with the application entry point, replacing NoFlo’s standard component loader with the generated custom one

To automate these steps we have grunt-noflo-browser, a plugin for the Grunt task runner that we use for build automation.

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

选项 1：

I am using Angular CLI. Webpack comes integrated with angular cli which can be moved to webpack based configuration by using "ng eject" command, and then I can use Grunt task runner to set it up. I have never before used Grunt. I have no idea how will it work out. Another headache that thereafter I will have to manage webpack configurations going further into development.

选项 2：

Same as above but do everything manually. Removes the headache of going Grunt path. Creates new questions and complexities about how to use fbp-manifest tool and how to generate custom NoFlo Component loader. Also maintaining webpack configurations is an added task going further into development.

选项 3：

If any other path exists specific to Angular CLI

我将集成 Noflo 并针对我的应用程序对其进行大量定制。我的节点将是新的，并且没有服务器运行ning，我将拥有自己的推送 IP 的系统。想法是整合Noflo和NofloUI，尽可能重用，剩下的开发。

如有任何建议，我将不胜感激。

谢谢

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 时，在浏览器中进入运行的步骤

Noflo: Steps to run inside browser when frontend is Angular 4 CLI

angular

webpack

gruntjs

noflo

Noflo：当前端为 Angular 4 CLI 时，在浏览器中进入 运行 的步骤

Noflo: Steps to run inside browser when frontend is Angular 4 CLI

angular

webpack

gruntjs

noflo

Noflo：当前端为 Angular 4 CLI 时，在浏览器中进入运行的步骤