如何在 NuGet 包中包含 JS 文件

Question

我需要创建一个 .NET Standard 2.1 NuGet 包，其中包含一个 JavaScript 文件，该文件将添加到我的消费应用程序中，路径如下：

/wwwroot/js/myFileFromNugetPackage.js

（消费应用程序恰好是 Blazor 服务器应用程序）

我关注了一个使用 *.targets 文件的example，但它对我不起作用。

我得到的最接近的方法是按如下方式设置我的 NuGet 项目：

1. 创建一个名为“wwwroot”的顶级文件夹
2. 添加文件“wwwroot/js/myFileFromNugetPackage.js”
3. 在该 JS 文件的属性中，设置“Build Action = Content”和“Copy to Output Directory”=“Copy Always”

我将它发布到我的私人 NuGet 库。

然后我将该包添加到我的 Blazor (.Net Core 3.1) 应用程序中。

当我查看 Visual Studio 的解决方案资源管理器时，我所看到的看起来很有希望：

/wwwroot/js/myFileFromNugetPackage.js

不过……

如果我在同一目录中手动创建一个新文件，那么我现在有：

/wwwroot/js/manuallyAddedFile.js /wwwroot/js/myFileFromNugetPackage.js

当我转到两个文件的属性时，我看到了不同的路径：

C:{一些路径}\MyApplication\wwwroot\js\manuallyAddedFile.js

和

C:\Users\{me}\.nuget\packages\{myNuGetPackage}\{version}\contentFiles\any\netstandard2.1\wwwroot\js\myFileFromNugetPackage.js

不出所料，当我尝试使用 Blazor 的 JS Interop 使用这些 JS 文件中的任何一个时，我可以使用我手动输入的那个，但它无法从我的 NuGet 包中找到那个。 F12 开发者工具仅显示客户端上手动创建的工具。

所以，我的问题是：如何设置我的 NuGet 项目以编写一个 JS 文件，以便它最终位于正确的目录中？

Answer 1

不出所料，当我尝试使用其中任何一个 JS 文件时 使用 Blazor 的 JS 互操作，我可以使用我手动输入的那个，但是 它在我的 NuGet 包中找不到那个。

因为你只能在 Blazor 应用程序（新 SDK 格式）中使用packagesreference nuget management format，所以你导入包只能通过引用链接的形式将你的文件以包的形式导入到项目中，所以 myFileFromNugetPackage。 Js 属性显示在路径 ../. Nuget/packages 中。

这也是 pacakgesreference nuget 管理格式的一个特性。顺便说一句，packagesconfig nuget management format 不是这种情况。

当您添加一个新项目时，意味着您已经在当前解决方案下创建了一个文件，因此您可以在该解决方案下找到新文件。

我遵循了一个使用 *.targets 文件的示例，但它不起作用 为了我。所以，我的问题是：我如何设置我的 NuGet 项目来编写 一个 JS 文件，以便它在正确的目录中结束？

解决方案

要解决您的问题，您可以将目标文件添加到 nuget 包中，该包将实际文件复制到项目中，以便在主项目中引用它而不在链接中引用。

我尝试了您的链接演示，它可以成功实现您的目标。 核心就是这一段

 <ItemGroup>
        <SourceScriptFiles Include="$(MSBuildThisFileDirectory)..\content\scriptsToGenerate\*.js" />
    </ItemGroup>
    <Target Name="CopyScriptsToProject" BeforeTargets="Build">
        <Copy SourceFiles="@(SourceScriptFiles)" DestinationFolder="$(ProjectDir)\wwwroot\js\scriptsToGenerate\"
        />
    </Target>

注意：

在某些情况下，您可能希望在使用您的包的项目中添加自定义构建目标或属性，例如在构建期间运行自定义工具或流程。为此，您可以将格式为 <package_id>.targets 或 <package_id>.props 的文件（例如 Contoso.Utility.UsefulStuff.targets）放在项目的 \build 文件夹中。

这个预处理目标只能在构建时执行， 所以我怀疑你在不构建项目的情况下在主项目中找不到JS文件。希望它可以帮助你。