5

在默认的 Blazor 项目中，我们获取Pages/_Host.cshtml包含应用程序 HTML 模板之类的文件。

最近我创建了我的第一个 Razor 组件库 (RCL)，它可以工作。这是它的脚本部分：

<script src="_content/Woof.Blazor/js/woof.js"></script>
<script src="_content/Woof.Blazor/js/modal.js"></script>
<script src="_content/Woof.Blazor/js/input.js"></script>
<script src="_content/Woof.Blazor/js/datatable.js"></script>
<script src="_content/Woof.Blazor/js/autocomplete.js"></script>

这些脚本手动包含在我的应用程序中。库有没有办法自动将这些文件添加到应用程序模板中？顺便说一句，如果样式表也可以自动添加，那就太好了。

编辑：我只是试图创建一个_Scripts.cshtml文件，但它没有工作。Visual Studio 显示了很多奇怪的错误，可能是由于缺少包引起的，但我不知道。使脚本成为部分视图？它实际上并不是 MVC 的一部分。所以可能我错了。

我想要实现的是用一行替换上面的整个脚本部分，包括我的库中所有预定义和预配置的脚本。

4

3 回答 3

4

没有开箱即用的东西可以做你正在尝试的事情。原因是有时脚本和 CSS 标签的顺序真的很重要。

例如，如果我覆盖了 Bootstrap 中的一些类，但在 bootstrap 之前包含了我的 CSS 文件标签，那么它将不起作用。如果 CSS 和 JS 文件是自动生成的，则无法控制导致此问题的顺序。

根据您的问题，您列出了库中存在的几个脚本。我建议采取的方法是将这些脚本捆绑并缩小到一个文件中。然后，您只需要在任何消费应用程序中添加一个引用。这也将加快消费应用程序的加载速度，它只需要加载一个脚本，而不是 5 个。

有多种方法可以实现这一点，但我认为现在最常见的是 webpack。一个快速的 google 会弹出 10s 的博客文章来显示这个配置，例如，https://ideas.byteridge.com/webpack-minifying-your-production-bundle/。这一切都可以自动化到构建管道中，因此可以与完整的 CI/CD 一起使用。

于 2020-04-26T08:08:44.637 回答
1

对于 CSS，您可以尝试我的库 - BlazorStyled ( https://BlazorStyled.io )。它动态地将样式添加到您不需要包含在模板中的样式表中。还有其他好处，例如 - 您可以在组件中定义样式，并且永远不会发生 css 冲突，因此您永远不需要再次使用 !important。如果您在反应/提示/角度中使用了情感或迷人之类的东西，则与那些类似。

于 2020-04-26T12:37:47.183 回答
0

在 .net 5 for css 中，您可以使用CSS Isolation。它将css内容附加到每个组件，但是对于js文件，您需要在_Host.cshtml中加载全部并且您不能单独加载它们，您可以稍后调用所需的js函数。

于 2021-01-21T04:24:19.107 回答