在 ASP.NET Core 项目中使用 npm 管理你的前端组件包

前言

        在项目的前端开发中，对于绝大多数的小伙伴来说，当然，也包括我，不可避免的需要在项目中使用到一些第三方的组件包。这时，团队中的小伙伴是选择直接去组件的官网上下载，还是图省事直接在网上搜索，然后从一些来源不明的地方下载，我们就无法管控了。同时，我们添加的组件间可能存在各种依赖关系，如果我们没有正确下载引用的话，到最后可能还是无法正常使用。

        因此，如何从可信的源下载组件包，以及如何轻松的解决各个组件间的依赖关系就成了我们需要解决的问题，那么，有没有一种工具可以帮我们解决这一问题？你好，有的，npm 了解一下。

        仓储地址：github.com/Lanesra712/…

Step by Step

        在 .NET Framework 的项目中，我们可以在项目中通过 Nuget 下载安装前端的组件包。但是 Nuget 更多的是作为 .NET 后端项目中的包管理器，在这里管理前端的组件包显得有些不太合适。

        于是，在 .NET Core 的时代到来后，伴随着前端的发展，微软在创建的示例项目中开始推荐我们使用 bower 来管理我们项目中的前端组件包，然后，bower is dead。。。。

        所以这里，我采用 npm 作为我们的 ASP.NET Core 项目中的前端包管理器。

        一、安装 Node 环境

        Node.js 是一个能够在服务端运行 Javascript 的执行环境，也就是说，Javascript 不仅可以用于前端，也可以构建后端服务了。而 npm 则是 Node.js 官方提供的包管理工具，所以在使用 npm 之前，需要在我们的电脑上安装 Node.js 环境。

        当然，如果你之前有开发过 Vue、Angular 这类的前端项目，你肯定已经安装好了。如果没有，打开 Node.js 的官网（nodejs.org/en/download），根据你正在使用的操作系统信息，选择安装包下载就可以了。

        如果你使用的是 window 系统，很简单，下载 msi 安装包，一路 next 即可。在最新版本的 Node.js 安装包中，npm 是随着 Node.js 的安装一起完成的。我们可以使用下面的命令进行验证，当可以打印出你安装的版本信息，则说明安装已经完成了。

//1、node.js 版本
node -v

//2、npm 版本
npm -v
复制代码

        二、使用 npm 安装包

        这篇文章的示例项目，我采用的是 ASP.NET Core 2.2 默认生成的 MVC 项目，因为在写文章的过程中有过更换解决方案，所以文章中的截图可能会出现名称前后不对应的情况，还请见谅。

        当示例项目创建完成后，会自动在项目中引用 bootstrap 和 jquery，所以，我们就在这个项目的基础上，尝试采用 npm 来管理我们的前端组件包。

        右击我们的项目，添加一个 package.json 配置文件。在这个 json 文件中定义了这个项目所需要的各种前端模块，以及项目的配置信息（比如名称、版本、许可证等等）。当我们从别处拷贝这个项目后，通过执行 npm install 命令，就会根据这个配置文件，自动下载项目中所需要引用的前端组件包。

        打开 package.json 文件，如果你选择使用 VS 进行编辑的话，可以看到 VS 会自动帮我们出现代码补齐提示。这里我添加了一个 dependencies 节点，它与 devDependencies 节点都代表我们项目中需要安装的插件。不同的是，devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 中引用的则是需要发布到生产环境中的。

        例如，这里我们需要在项目中添加 bootstrap 和 jquery，因为在正式发布时如果缺少这两个组件，就会导致我们的程序报错，所以这里我们需要添加到 dependencies 节点下，而像后面我们使用到的 gulp 的一系列插件，只有在我们进行项目开发时才会使用到，所以我们只需要添加到 devDependencies 即可。

        这里我推荐使用命令行的方式添加组件，可以更好地展示出我们添加的组件需要添加哪些依赖。右键选中我们的示例项目，选择 Open Command Line，打开控制台，输入下列的命令，将 bootstrap 添加到我们的项目中。

        在 install 命令中我们添加了 --save 修饰，表示需要将 bootstrap 添加到 dependencies 节点下面。如果，你需要将引用到的 package 安装到 devDependencies 节点下，则需要使用 --save-dev 修饰。

npm install bootstrap --save
复制代码

        可以看到，安装完成后，npm 提示我们 bootstrap 依赖于 jquery 和 popper.js，所以这里我们手动添加上这两个依赖的组件。

        当我们安装 jquery 的 1.9.1 版本后，因为之前的 jquery 版本存在一些安全隐患，所以 npm 会提示我们执行 npm audit 命令来查看当前项目中可能存在的安全隐患，以及对于如何解决这些隐患的建议。

        这里我进行了版本升级，你可以根据自己的需求进行操作。请特别注意，当你在完成项目的基础包加载后，后续对于包版本的升级一定要谨慎、谨慎、再谨慎。升级完成后的 package.json 文件如下所示。

{
  "version": "1.0.0",
  "name":