ASP.NET Core MVC 客户端包管理

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

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

最后, 我们建议Yarn而不是NPM,因为它更快,更稳定并且与NPM兼容.

@ABP NPM Packages

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

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

为了解决版本问题, 我们创建了一套标准包, 这取决于一些常见的第三方库. 一些示例包是@abp/jquery, @ abp/bootstrap和@abp/font-awesome. 你可以从Github存储库中查看列表.

标准包的好处是:

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

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

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

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

安装包

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

yarn

虽然你可以使用npm install,但如前所述,建议使用Yarn.

贡献包

如果你需要不在标准软件包中的第三方NPM软件包,你可以在Githubrepository上创建Pull请求. 接受遵循这些规则的拉取请求:

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

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

映射库资源

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

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

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

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

资源映射定义文件

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

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

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

示例映射配置如下所示:

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任务自动发现并映射来自所有依赖项的所有资源(递归).

参见

• 捆绑 & 压缩
• 主题