jsdelivr 使用_如何使用JSDelivr

jsdelivr 使用

从npm和GitHub轻松下载JavaScript库 (Easily download JavaScript libraries from npm and GitHub)

The most newbie-friendly way to add a library to a project is to:

向项目添加库的最适合新手的方式是：

1. Search for the library
   搜索图书馆
2. Look for the source file
   查找源文件
3. Copy the source file
   复制源文件
4. Paste what you copied into the project.
   将复制的内容粘贴到项目中。

This works, but it’s a painful process. It’s easier if you use CDNs like JSDelivr.

这行得通，但这是一个痛苦的过程。 如果使用JSDelivr之类的CDN，会更容易。

什么是CDN？ (What is a CDN?)

CDN stands for content delivery network. Its main purpose is to let users download files faster. Read this article by Fastly if you’re wondering whether you should use a CDN.

CDN代表内容交付网络。 其主要目的是让用户更快地下载文件。 如果您想知道是否应该使用CDN，请快速阅读此文章 。

CDNS let users download files faster by placing datacenters all over the world. When the browser sees a CDN link, they’ll serve up the library from the datacenter closest to the user. This is how CDNs work.

CDNS通过在全球范围内放置数据中心，使用户可以更快地下载文件。 当浏览器看到CDN链接时，它们将从最接近用户的数据中心提供该库。 CDN就是这样工作的。

什么是JSDelivr？ (What is JSDelivr?)

JSDelivr is a special kind of CDN. It’s built to let users download JavaScript libraries that are hosted on npm and Github. (You can also load Wordpress plugins if they’re hosted on Wordpress.org).

JSDelivr是一种特殊的CDN。 它旨在让用户下载npm和Github上托管JavaScript库。 (如果它们托管在Wordpress.org上，则还可以加载Wordpress插件)。

If you use JSDelivr (or any other CDN that serves JavaScript libraries), you don’t need to copy-paste the source files into your project. You can use a link like this:

如果使用JSDelivr(或任何其他提供JavaScript库的CDN)，则无需将源文件复制粘贴到项目中。 您可以使用如下链接：

<script src="https://cdn.jsdelivr.net/npm/package-name"><;/script>

JSDelivr lets you specify the version of a library you want to download. If you want to specify a version, you add the version number after an @, like this:

JSDelivr允许您指定要下载的库的版本。 如果要指定版本，请在@之后添加版本号，如下所示：

<script src="https://cdn.jsdelivr.net/npm/[email protected]"><;/script>

我如何使用JSDelivr (How I use JSDelivr)

I use JSDelivr more like a package manager since JSDelivr lets you specify the version of a library. I can upgrade or downgrade the library by changing a number. There’s no need to copy-paste the original source into my project.

由于JSDelivr允许您指定库的版本，因此我将JSDelivr更像是程序包管理器 。 我可以通过更改数字来升级或降级库。 无需将原始源复制粘贴到我的项目中。

However, I rarely use JSDelivr nowadays because I already have a build process that uses Webpack. Webpack lets you require libraries into frontend JavaScript. It lets you use npm as a package manager.

但是，由于我已经拥有使用Webpack的构建过程， 因此如今我很少使用 JSDelivr。 Webpack允许您require库加入前端JavaScript。 它使您可以将npm用作程序包管理器。

I only use JSDelivr for projects that:

我仅将JSDelivr用于以下项目：

1. Require a library
   需要图书馆
2. The library exists on JSDelivr (or other CDNs)
   该库位于JSDelivr(或其他CDN)上
3. The project doesn’t have Webpack (or similar tools installed)
   该项目没有Webpack(或安装的类似工具)

One example of such a project is the 20 components in Learn JavaScript.

此类项目的一个示例是Learn JavaScript中的20个组件。

Here’s why.

这就是为什么。

Students who’re enrolled in Learn JavaScript are trying to learn JavaScript. I don’t want to distract them by making them learn Webpack.

已注册学习JavaScript的学生正在尝试学习JavaScript。 我不想通过让他们学习Webpack来分散他们的注意力。

Instead, I want to help them focus on what they’re here for — learning JavaScript. I do this by removing complexity from projects we build together. I strip everything down to plain old HTML, CSS, and JavaScript.

相反，我想帮助他们专注于他们的工作-学习JavaScript。 为此，我消除了我们共同构建的项目的复杂性。 我将所有内容简化为简单的旧HTML，CSS和JavaScript。

We’ve talked about what is JSDelivr, why use it, and when to use it. Let’s dive into the details of using it now.

我们已经讨论了什么是JSDelivr，为什么使用它以及何时使用它。 让我们深入研究现在使用它的细节。

For the rest of the article, we’ll use a library called zl-fetch as an example.

对于本文的其余部分，我们将使用一个名为zl-fetch的库作为示例。

安装库 (Installing a library)

To install a library, you need to add a <script> tag that points to the library on JSDelivr. You can load the library from npm or Github, depending on your preferences.

要安装库，您需要添加一个<scri pt>标记，该标记指向JSDelivr上的库。 您可以根据自己的喜好从npm或Github加载库。

I tend to load libraries from npm.

我倾向于从npm加载库。

<script src="https://cdn.jsdelivr.net/npm/package-name"><;/script>

You need to change package-name to the name of the library you’re installing. In this case, it’s zl-fetch.

您需要将package-name更改为要安装的库的名称。 在这种情况下，它是zl-fetch 。

<script src="https://cdn.jsdelivr.net/npm/zl-fetch"><;/script>

If you’re unsure of the name of the library, you can search on npm, or directly on JSDelivr.

如果不确定库的名称，可以在npm或直接在JSDelivr上搜索 。

指定版本 (Specifying a version)

By default, JSDelivr downloads the latest version of a library.

默认情况下，JSDelivr下载库的最新版本。

I don’t recommend you use the latest version because authors may update their library. If they update their library, your code may break.

我不建议您使用最新版本，因为作者可能会更新其库。 如果他们更新其库，则您的代码可能会中断。

You always want to specify a version number. You can add a version number by adding @, followed by the version number after the package name, like this:

您总是想指定一个版本号。 您可以通过添加@来添加版本号，然后在软件包名称后添加版本号，如下所示：

<script src="https://cdn.jsdelivr.net/npm/[email protected]"><;/script>

Version numbers follow a Semver format. You can tell what versions are available by checking the available tags on Github.

版本号遵循Semver格式。 您可以通过检查Github上的可用标签来确定可用的版本。

In our case, the current version of zl-fetch is 2.1.9:

在我们的例子中，当前的zl-fetch版本是2.1.9 ：

<script src="https://cdn.jsdelivr.net/npm/[email protected]"><;/script>

加载特定文件 (Loading a specific file)

JSDelivr relies on authors to specify a default file for the above format to work. If the default file is not specified, you need to point to the correct file.

JSDelivr依靠作者为上述格式指定默认文件才能工作。 如果未指定默认文件，则需要指向正确的文件。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/path-to-file"><;/script>

There are two ways to know what files are available.

有两种方法可以知道哪些文件可用。

First, you can search for the package on JSDelivr. You’ll see a list of files and folders you can point to:

首先，您可以在JSDelivr上搜索软件包。 您将看到可以指向的文件和文件夹列表：

Second, if you know about npm, you can use npm to install the package somewhere on your computer. Then use your Finder (or Explorer) to browse through the files.

其次，如果您了解npm，则可以使用npm将软件包安装在计算机上的某个位置。 然后使用Finder(或Explorer)浏览文件。

In this case, let’s say the default file is not specified, and we want the dist/index.js file. Here’s what you’ll write:

在这种情况下，假设未指定默认文件，而我们需要dist/index.js文件。 这是您要编写的内容：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"><;/script>

加载缩小版 (Loading a minified version)

Minified files are usually smaller in size. Users will be able to download the minified files faster than an unminified file.

缩小的文件通常较小。 与未缩小的文件相比，用户将能够更快地下载缩小的文件。

JSDelivr minifies files automatically if you use the .min.js extension.

如果使用.min.js扩展名， .min.js自动缩小文件。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"><;/script>

结语 (Wrapping up)

I hope this article gives you a good overview of what JSDelivr can do.

我希望本文能使您对JSDelivr的功能有一个很好的了解。

Thanks for reading. Did this article help you out? If it did, I hope you consider sharing it. You might help someone else out. Thanks so much!

谢谢阅读。 这篇文章对您有帮助吗？ 如果确实如此，希望您考虑共享它 。 您可能会帮助别人。 非常感谢！

This article was originally posted at my blog.Sign up for my newsletter if you want more articles to help you become a better frontend developer.

本文最初发布在我的博客上。 如果您想获得更多文章来帮助您成为更好的前端开发人员，请注册我的时事通讯 。

翻译自: https://www.freecodecamp.org/news/how-to-use-jsdelivr-e64e5590f66e/

jsdelivr 使用