npm包@use-cdn/cli使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

在前端开发中，应用程序升级是必要的。升级时，我们希望用户可靠且快速地下载新的代码文件，而又不会破坏原来的浏览体验。作为一种常见的优化方法，CDN是向用户分发升级后的代码的一种标准方式。

@use-cdn/cli 是一个命令行工具，它的目的是使进行 CDN 部署更加容易，包含了一些 CLI 命令，能够将您的应用程序部署到 CDN 并提高访问速度。在这篇文章中，我将详细说明如何使用@use-cdn/cli工具，希望对于使用CDN加速的前端工程师有所帮助。

首先，我们需要安装@use-cdn/cli。npm是一种基于JavaScript的包管理器，所以我们可以在终端中使用以下命令来安装这个CLI工具：

npm install -g @use-cdn/cli

@use-cdn/cli需要配置信息才能开始工作，您需要设置两个环境变量：

变量	描述
USE_CDN_ACCESS_KEY	必填，CDN访问密钥
USE_CDN_SECRET_KEY	必填，CDN访问密钥对应的Secret

示例：

export USE_CDN_ACCESS_KEY='your_access_key'
export USE_CDN_SECRET_KEY='your_secret_key'

当您完成了基础安装和配置后，我们可以开始使用@use-cdn/cli进行CDN部署。

第一步是创建一个CDN加速配置：

ucdn create <config-name> --endpoint <endpoint> --origin <origin>

参数说明：

参数	类型	描述
config-name	字符串	一个唯一的标识符来标识你的CDN部署，例如定义一个名为my_cdn_config
endpoint	字符串	您的 CDN 加速服务商的 API Endpoint URL，例如：`http://www.example.com`
origin	字符串	加速服务将缓存的所依据的源站点 URL，例如：`http://www.example.com`

第二步是上传文件到CDN：

ucdn upload <config-name> <path> --prefix <prefix> --include <include> --exclude <exclude>

参数说明：

参数	类型	描述
config-name	字符串	第一步中您创建的加速服务配置名称
path	字符串	要上传的文件路径
prefix	字符串	CDN上的路径前缀，例如`/`，如果您希望所有文件都在根目录下，则可以不设置
include	字符串	应包括在同步中的文件和文件夹的 glob 模式
exclude	字符串	应该从同步中排除的文件和文件夹的 glob 模式

举个例子：

ucdn upload my_cdn_config ./dist --prefix /my-app --include '*.html' --exclude '*.map'

此命令将把 dist/assets 目录下的所有以.html结尾的文件上传到 CDN 的 /my-app 路径下，其中所有以.map结尾的文件将被排除在同步范围之外。

将文件发布到 CDN 之前，我们需要创建一个发布版本：

ucdn create-version <config-name>

参数说明：

参数	类型	描述
config-name	字符串	第一步中您创建的加速服务配置名称

最后，我们可以发布文件到CDN：

ucdn publish <config-name>

参数说明：

参数	类型	描述
config-name	字符串	第一步中您创建的加速服务配置名称

使用@use-cdn/cli，我们可以很容易的将前端代码发布到CDN，这样可以极大的提高用户体验，同时减轻服务器的负担，这是前端应用优化的一个好方法。本文示例代码的 repo 在GitHub上，如果需要进一步了解或提出建议，欢迎在此基础上继续探讨。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60067359890c4f7277583e06