## ASP.NET Core MVC 客户端包管理

ABP框架可以与任何类型的客户端包管理系统一起使用. 甚至你可以决定不使用包管理系统并手动管理依赖项.

但是, ABP框架最适用于**NPM/Yarn**. 默认情况下,内置模块配置为与NPM/Yarn一起使用.

最后, 我们建议[**Yarn**](https://yarnpkg.com/)而不是NPM,因为它更快,更稳定并且与NPM兼容.

### @ABP NPM Packages

ABP是一个模块化平台. 每个开发人员都可以创建模块, 模块应该在**兼容**和**稳定**状态下协同工作.

一个挑战是依赖NPM包的**版本**. 如果两个不同的模块使用相同的JavaScript库但其不同(并且可能不兼容)的版本会怎样.

为了解决版本问题, 我们创建了一套**标准包**, 这取决于一些常见的第三方库. 一些示例包是[@abp/jquery](https://www.npmjs.com/package/@abp/jquery), [@ abp/bootstrap](https://www.npmjs.com/package/@abp/bootstrap)和[@abp/font-awesome](https://www.npmjs.com/package/@abp/font-awesome). 你可以从[Github存储库](https://github.com/volosoft/abp/tree/master/npm/packs)中查看**列表**.

**标准包**的好处是:

* 它取决于包装的**标准版本**. 取决于此包是**安全**,因为所有模块都依赖于相同的版本.
* 它包含将库资源(js,css,img...文件)从**node_modules**文件夹复制到**wwwroot/libs**文件夹的gulp任务. 有关更多信息, 请参阅 *映射库资源* 部分.

依赖标准包装很容易. 只需像往常一样将它添加到**package.json**文件中. 例如:

````
    {
      ...
      "dependencies": {
        "@abp/bootstrap": "^1.0.0"
      }
    }
````

建议依赖于标准软件包, 而不是直接依赖于第三方软件包.

#### 安装包

依赖于NPM包后, 你应该做的就是从命令行运行**yarn**命令来安装所有包及其依赖项:

````
yarn
````

虽然你可以使用`npm install`,但如前所述,建议使用[Yarn](https://yarnpkg.com/).

#### 贡献包

如果你需要不在标准软件包中的第三方NPM软件包,你可以在Github[repository](https://github.com/volosoft/abp)上创建Pull请求. 接受遵循这些规则的拉取请求:

* 对于NPM上的`package-name`, 包名称应该命名为`@abp/package-name`(例如:`bootstrap`包的`@abp/bootstrap`).
* 它应该是**最新的稳定**版本的包.
* 它应该只依赖于**单个**第三方包. 它可以依赖于多个`@abp/*`包.
* 包应包含一个`abp.resourcemapping.js`文件格式,如*映射库资源*部分中所定义. 此文件应仅映射所依赖包的资源.
* 你还需要为你创建的包创建[bundle贡献者](Bundling-Minification.md).

有关示例, 请参阅当前标准包.

### 映射库资源

使用NPM包和NPM/Yarn工具是客户端库的事实标准.  NPM/Yarn工具在Web项目的根文件夹中创建一个**node_modules**文件夹.

下一个挑战是将所需的资源(js,css,img ...文件)从`node_modules`复制到**wwwroot**文件夹内的文件夹中,以使其可供客户端/浏览器访问.

ABP将基于[Gulp](https://gulpjs.com/)的任务定义为**将资源**从**node_modules**复制到**wwwroot/libs**文件夹. 每个**标准包**(参见*@ABP NPM Packages*部分)定义了自己文件的映射. 因此, 大多数情况你只配置依赖项.

**启动模板**已经配置为开箱即用的所有这些. 本节将介绍配置选项.

#### 资源映射定义文件

模块应该定义一个名为`abp.resourcemapping.js`的JavaScript文件,其格式如下例所示:

````js
module.exports = {
    aliases: {
        "@node_modules": "./node_modules",
        "@libs": "./wwwroot/libs"
    },
    clean: [
        "@libs"
    ],
    mappings: {
        
    }
}
````

* **aliases**部分定义了可在映射路径中使用的标准别名(占位符). **@node_modules**和 **@libs**是必需的(通过标准包), 你可以定义自己的别名以减少重复.
* **clean**部分是在复制文件之前要清理的文件夹列表.
* **mappings**部分是要复制的文件/文件夹的映射列表.此示例不会复制任何资源本身,但取决于标准包.

示例映射配置如下所示:

````js
mappings: {
    "@node_modules/bootstrap/dist/css/bootstrap.css": "@libs/bootstrap/css/",
    "@node_modules/bootstrap/dist/js/bootstrap.bundle.js": "@libs/bootstrap/js/"
}
````

#### 使用 Gulp

正确配置`abp.resourcemapping.js`文件后, 可以从命令行运行gulp命令:

````
gulp
````

当你运行`gulp`时,所有包都会将自己的资源复制到**wwwroot/libs**文件夹中. 只有在**package.json**文件中对依赖项进行更改时, 才需要运行`yarn＆gulp`.

> 运行Gulp命令时, 使用package.json文件解析应用程序的依赖关系. Gulp任务自动发现并映射来自所有依赖项的所有资源(递归).

#### 参见

* [捆绑 & 压缩](Bundling-Minification.md)
* [主题](Theming.md)