如何在 NuGet package 中包含 JS 文件

Question

I need to create a .NET Standard 2.1 NuGet package that contains a JavaScript file which will be added to my consuming application in the following path:

/wwwroot/js/myFileFromNugetPackage.js

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

我遵循了一个使用 *.targets 文件的示例，但它对我不起作用。

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

1. 创建一个名为“wwwroot”的顶级文件夹
2. 添加文件“wwwroot/js/myFileFromNugetPackage.js”
3. 在该 JS 文件的属性中，设置“构建操作 = 内容”和“复制到 Output 目录”=“始终复制”

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

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

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

/wwwroot/js/myFileFromNugetPackage.js

然而...

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

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

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

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 package 中找到那个。 F12 开发人员工具仅显示客户端上存在的手动创建的工具。

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

Answer 1

不出所料，当我尝试使用 Blazor 的 JS Interop 使用这些 JS 文件中的任何一个时，我可以使用我手动输入的那个，但它无法从我的 NuGet package 中找到那个。

Because you can only in Blazor application ( new SDK format ) using packagesreference nuget management format , so you import package can only by reference links will be in the form of your files into the project in a package, so myFileFromNugetPackage. js属性显示在路径../. Nuget/packages ../. Nuget/packages 。

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

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

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

解决方案

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

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

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

笔记：

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

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