捆绑 Blazor 组件的 JavaScript

Question

Blazor 组件支持 CSS 捆绑和内聚性：

Foo.razor

将具有

Foo.css

，这将： a) 享受 CSS 隔离； b) 捆绑成

{ASSEMBLY NAME}.styles.css

。

我追求的是组件范围 JavaScript 的类似机制。

我不想想要将通用函数放在全局范围内（

window

）并通过

jsComponentInitializers

调用它们，如here所示，主要是因为它打破了组件作为内聚单元的想法；而且，如果我将 JavaScript 代码放入

.razor

文件中，由于我使用该组件的多个实例，最终会导致相同的代码重复并分散在整个页面中。

渲染模式为静态服务器端渲染（SSR）。

有没有办法在自定义 Blazor 组件中使用 JavaScript，使其捆绑成类似于

{ASSEMBLY NAME}.scripts.js

或任何其他形式的东西，并且只存在一次？（请注意，我仍然希望能够区分组件实例的方式与 CSS 组件隔离的方式类似）

Answer 1

Blazor 不像 CSS 那样支持 JavaScript 隔离。但是，您可以使用 JavaScript 捆绑程序将多个文件编译为单个文件。为此，请在 Visual Studio 2022 中下载 Bundler 扩展。然后，在根目录中创建一个包含以下内容的配置文件：

{
    "outputFileName": "wwwroot/js/bundle.min.js",
    "inputFiles": [
      "wwwroot/js/ts/file1.js",
      "wwwroot/js/ts/file2.js",
      "wwwroot/js/ts/file3.js",
      "wwwroot/js/ts/file4.js"
    ],
    "minify": {
      "enabled": true,
      "outputMode": "singleLine",
      "commentMode": "important",
      "adjustRelativePaths": true,
      "renameLocals": true,
      "gzip": true
    },
    "sourceMap": true
  }