VS2017中.NET Core React项目无法识别NPM模块的问题咨询

嗨，针对你在Visual Studio 2017里开发React/Redux .NET Core 2.0项目时遇到的font-awesome自动集成问题，我给你几个贴合VS开发习惯的自动化方案，不用手动复制文件，还能方便后续包更新：

LibMan是VS2017及以后版本集成的前端库管理器，完全可视化操作，能自动帮你从npm复制需要的文件到项目静态目录，后续更新也很省心：

• 右键你的项目 → 选择「Add」→ 「Client-Side Library...」
• 在弹出的窗口中，「Library」输入框直接搜索 font-awesome，选择和你npm安装一致的版本
• 「Target location」设置为项目的静态资源目录，比如 wwwroot/lib/font-awesome/
• 点击「Install」，LibMan会自动复制font-awesome的css、字体等必要文件，同时生成一个libman.json配置文件来记录这个依赖
• 后续要更新font-awesome的话，右键libman.json → 「Restore」，或者重新打开Client-Side Library窗口选择新版本安装，旧文件会自动被覆盖
• 最后在你的布局页面（比如_Layout.cshtml）里引用样式：

  <link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.min.css" />
  

如果你的项目是用VS自带的React模板创建的，大概率已经配置了webpack，直接在入口文件里引入font-awesome即可：

• 打开React的入口文件（比如ClientApp/src/index.js），添加一行引入代码：

  import 'font-awesome/css/font-awesome.min.css';
  

• 之后每次构建或运行项目时，webpack会自动把font-awesome的样式打包到最终的dist文件中，无需手动复制文件；更新npm包后，重新构建就会自动生效
• 小提示：如果webpack提示缺少loader，可能需要安装css-loader和style-loader，不过VS的React模板一般已经预装了这些依赖

这个方法能快速验证效果，但缺点较多，不建议用于生产环境：

• 打开Startup.cs，在Configure方法里添加以下代码，让静态文件中间件能访问node_modules目录：

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

• 然后在布局页面引用样式：

  <link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css" />
  

• 缺点：node_modules目录体积庞大，直接暴露会影响性能，且部署时需要确保该目录被包含，不如前两个方案稳定可靠

总的来说，优先选LibMan方案，完全贴合VS的操作逻辑，自动化程度高，后续包更新也非常方便，不用操心手动复制的问题。

内容的提问来源于stack exchange，提问作者Daniel Przybylski