如何在 Visual Studio 2017 中将 npm 包与 ASP.NET CORE 2 一起使用？

Question

我在 Visual Studio 2017 中的 ASP.NET Core 2 项目中添加了一些 npm 包。现在我想使用这些包中的 css 和 js 文件，但 VS 看不到它们，因为 node_modules 文件夹位于 wwwroot 之外。这里的常见做法是什么，如何让 Visual Studio 使用 node_modules？

Answer 1

只要您将所需的 npm 包添加到您的项目中，就可以通过：

• npm install 命令

  或

• 在npm configuration file 中输入软件包名称及其版本

  或

• 搜索Library Dialog中的包，如下图所示，

它们将被下载并恢复到 node_modules 文件夹中。但是要在视图中使用它们，您需要将它们添加到客户端文件夹，例如wwwroot 文件夹下的lib。

您可以通过文件系统手动将它们复制到wwwroot 文件夹，或使用库对话框：

1. 右键点击wwwroot里面的lib目录
2. 点击添加，然后选择客户端库
3. 从提供程序中选择文件系统（如果 node_modules 文件夹中已存在所需文件）
4. 选择所需的全部或特定文件
5. 点击安装

但是，您可以手动管理此文件复制操作。

现在，您可以从wwwroot 下的文件夹中将文件拖放到您的视图中。如果您的视图是Layout，请注意省略~。

希望这有帮助.... 更多细节在这里：https://docs.microsoft.com/en-us/aspnet/core/client-side/libman/libman-vs?view=aspnetcore-3.0

Answer 2

通常的做法是捆绑您的网络资产，并且只将编译后的捆绑包放入您的wwwroot 文件夹中。

自 Visual Studio 2015 以来，我们拥有来自 NPM 世界的多个 Taskrunner：

• 吞咽
• 咕噜声

您可以使用它们编写一个脚本，该脚本会自动捆绑您的网络资产。此脚本具有对 NPM 基础架构的完全访问权限。

有一些工具可以让这变得超级简单：

• gulp-丑化
• gulp-cssmin

更多信息： https://docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp

---

也就是说，它也是possible to include你的npm文件夹：

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles(); // For the wwwroot folder

    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(Directory.GetCurrentDirectory(), "node_modules")),
        RequestPath = "/node_modules"
    });
}

但这是错误的方式。