ASP.NET Core MVC 客户端包管理

ABP 可与任何类型的客户端包管理系统协同工作。您甚至可以决定不使用包管理系统，而是手动管理依赖项。

然而，ABP 与 NPM 配合最为出色。默认情况下，内置模块已配置为与 NPM 协同工作。

@ABP NPM 包

ABP 是一个模块化平台。每位开发者都可以创建模块，而这些模块需要在兼容且稳定的状态下协同工作。

其中一个挑战在于依赖的 NPM 包版本。如果两个不同的模块使用了相同的 JavaScript 库，但版本不同（且可能不兼容），该如何处理？

为了解决版本控制问题，我们创建了一套标准包集，这些包依赖于一些常见的第三方库。例如 @abp/jquery、@abp/bootstrap 和 @abp/font-awesome。您可以在 GitHub 仓库中查看包列表。

标准包的优势在于：

• 它依赖于某个包的标准版本。依赖此包是安全的，因为所有模块都依赖同一版本。
• 它包含将库资源（js、css、img 等文件）从 node_modules 文件夹复制到 wwwroot/libs 文件夹的映射。详见映射库资源部分。

依赖标准包非常简单。只需像平常一样将其添加到 package.json 文件中。例如：

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

建议依赖标准包，而不是直接依赖第三方包。

包安装

在依赖 NPM 包后，您应在命令行中运行 abp install-libs 命令，以安装所有包及其依赖项，并将所需资源复制到 wwwroot/libs 文件夹：

abp install-libs

包贡献

如果您需要标准包集中未包含的第三方 NPM 包，可以在 GitHub 仓库上创建 Pull Request。符合以下规则的 Pull Request 将被接受：

• 包名应命名为 @abp/包名，对应 NPM 上的 包名（例如：bootstrap 包对应 @abp/bootstrap）。
• 应为该包的最新稳定版本。
• 应仅依赖单个第三方包。可以依赖多个 @abp/* 包。
• 包应包含一个 abp.resourcemapping.js 文件，格式如映射库资源部分所定义。此文件应仅映射所依赖包的资源。
• 您还需要为您创建的包创建捆绑贡献者。

请参考现有标准包作为示例。

映射库资源

使用 NPM 包和 NPM 工具是客户端库的事实标准。NPM 工具会在您的 Web 项目根目录下创建一个 node_modules 文件夹。

接下来的挑战是将所需资源（js、css、img 等文件）从 node_modules 复制到 wwwroot 文件夹内的某个文件夹，以便客户端/浏览器可以访问。

ABP CLI 的 abp install-libs 命令将资源从 node_modules 复制到 wwwroot/libs 文件夹。每个标准包（参见*@ABP NPM 包*部分）都定义了其自身文件的映射。因此，大多数情况下，您只需配置依赖项。

启动模板已配置为开箱即用。本节将解释配置选项。

资源映射定义文件

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

module.exports = {
    aliases: {
        "@node_modules": "./node_modules",
        "@libs": "./wwwroot/libs"
    },
    clean: [
        "@libs",
        "!@libs/**/foo.txt"
    ],
    mappings: {
        
    }
}

• aliases 部分定义了可在映射路径中使用的标准别名（占位符）。@node_modules 和 @libs 是必需的（由标准包要求），您可以定义自己的别名以减少重复。
• clean 部分是在复制文件之前要清理的文件夹列表。支持通配符匹配和否定，因此您可以微调要删除和保留的内容。上例将清理 ./wwwroot/libs 内的所有内容，但保留任何 foo.txt 文件。
• mappings 部分是要复制的文件/文件夹的映射列表。此示例本身不复制任何资源，而是依赖于标准包。

下面展示了一个映射配置示例：

mappings: {
    "@node_modules/bootstrap/dist/css/bootstrap.css": "@libs/bootstrap/css/",
    "@node_modules/bootstrap/dist/js/bootstrap.bundle.js": "@libs/bootstrap/js/",
    "@node_modules/bootstrap-datepicker/dist/locales/*.*": "@libs/bootstrap-datepicker/locales/",
    "@node_modules/bootstrap-v4-rtl/dist/**/*": "@libs/bootstrap-v4-rtl/dist/"
}

install-libs 命令

一旦您正确配置了 abp.resourcemapping.js 文件，就可以在命令行中运行以下 ABP CLI 命令：

abp install-libs

当您运行此命令时，所有包都会将它们自己的资源复制到 wwwroot/libs 文件夹中。只有在 package.json 文件中更改依赖项时，才需要运行 abp install-libs。

另请参阅

• 捆绑与压缩
• 主题