如何安装一个现有的npm项目？

在这一点上，我们已经很好地了解了npm的工作原理以及如何使用它来安装软件包和运行命令。现在让我们再进一步，看看下载并安装一个现有的npm项目，而不是从头开始。更有可能的是，这可能是你在大多数时候要做的事情。这比一个一个地安装和配置所有单独的部分要容易得多。

这就是我们在npm指南的最后一章中所涉及的内容，我将从我的一个真实项目中汲取个人经验。

这是一个现实生活中的npm项目

我选择的这个项目是我自己的SvelteKit静态博客启动器。我认为这是一个很好的例子，因为它带有很多预装包，很适合做示范。

这是我的一个真正的项目，旨在给你--你可能已经从名字上猜到了--一个建立静态生成的博客网站的开端。("静态生成 "意味着我们的代码将被编译成.html ，准备部署到网络上的任何地方。这是"Jamstack "建站方式中所包含的几种方法之一）。

如果你对SvelteKit一无所知也不用担心--这只是为了演示，我们不会写任何你不知道的东西。也就是说，值得注意的是，SvelteKit在后台使用了Vite，它实际上是一个npm包，使我们能够获得现代的构建工具和一个超级快速的开发服务器。

克隆项目

首先，我们需要 "克隆 "项目，这是一个花哨的说法，即把项目复制到我们的系统中，以便我们可以在本地工作。有两种方法来克隆一个现有的项目。

如果你喜欢浏览器中的可视化方式，可以前往GitHub的启动器 repo，点击GitHub用户界面中的 "代码 "下拉菜单，选择 "下载ZIP "选项。

或者，如果你喜欢使用命令行，可以运行这个命令（只要确保你在一个你不介意在你的电脑上添加一个新的项目文件夹的地方，例如：cd /path/to/folder ）。

npx degit https://github.com/josh-collinsworth/sveltekit-blog-starter.git sveltekit-blog-starter

你可能记得，npx 允许我们在不永久安装npm包的情况下运行它们。degit 像git clone 一样克隆项目，但没有它的Git历史（字面意思是 "去git化"）。

无论你使用哪种方法，你都会得到一个全新的sveltekit-blog-starter 文件夹。让我们在代码编辑器中打开它，打开终端，并运行npm install （或npm i ）命令。

npm在安装软件包时自动运行审计。

在这一点上，你会看到一个关于漏洞的说明，就像我们在本指南的最后一节所讲的那样。它可能会说 "发现0个漏洞 "这样的话（就像上面的截图一样），但这个数字很可能大于0。如果你确实看到漏洞，不要担心。你可以暂时忽略它，因为这不是一个我们打算在生产中推出的项目，供其他人看到或使用。(更多信息请参见前一章中关于npm audit 的部分）。

启动服务器并进行修改

如果你偷看一下克隆项目中的package.json 文件，你会看到启动开发服务器的命令。

npm run dev

在终端中运行该命令，你应该马上看到类似下面的内容。

在VS代码中，你可以在点击http://localhost:3000 URL的同时按下CMD，或者你可以在浏览器中手动输入。无论哪种方式，该网站都应该在浏览器中显示出来!

让我们在这里花一点时间来欣赏一下这有多快和多简单是的，我们可能不得不先安装一堆脚手架，但这是一个前期的、一次性的成本。我们只用了几个命令就在我们的机器上运行了整个项目，而且我们可以在任何时候做同样的事情来安装另一个现有的项目！我不会深究这个问题。

我不会深入研究这个特定项目的细节，因为它对学习npm并不重要，但它是一个很好的例子，因为它有很多很酷的东西预先配置好了，而且我们可以很容易地做出改变，并在浏览器中看到它们的更新。接下来让我们看看这些命令中的几个。

SvelteKit需要Node 14或更高版本。如果你在本指南中安装了npm，这对你来说就不是什么问题了。但如果你在我们开始之前已经安装了它，并且如果你在试图让这个项目运行时遇到错误，那么值得快速node -v ，以确定。如果你需要升级，nvm是你的朋友。

保存时自动编译Sass

你可以在src/lib/assets/scss/ 文件夹中找到项目的Sass文件。试着直接打开global.scss 文件。做一个改变，保存它，你应该在你的浏览器中看到自动（而且几乎是即时）更新。

进行内容修改

初始网站实际上是使用 repo 的README.md 文件作为其主页。如果你打开README.md ，并开始进行修改（如果你不懂Markdown也没关系，任何编辑都可以），你也应该看到这些修改在你保存后立即显示出来，就像Sass在上一步所做的那样。

如果你愿意，你可以打开另一个页面，比如说src/routes/contact.svelte 文件，并更新HTML，在保存后也能看到它在浏览器中实时刷新。

你甚至可以在src/routes/blog/_posts/ 中复制一个Markdown文件，并进行编辑，以看到它自动出现在/blog 页面的帖子列表中，如果你想走那么远的话。(只是要确保给它一个独特的标题）。

了解导入

关于npm项目，有一件很重要的事情，我们在第四章中简单地提到过，但还没有涉及：**导入。**如果我们不谈这个，本指南就不太完整了。其基本思想是，我们可以--就像它的名字一样--导入一个包，只是这样做时不需要把它安装在项目文件夹或你的系统中。相反，它是在现场使用的。

如何做到这一点？打开项目根部的svelte.config.js 文件夹，你会看到顶部有一块import 行，像这样。

import adapter from '@sveltejs/adapter-static'
import { mdsvex } from 'mdsvex'
import preprocess from 'svelte-preprocess'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypeSlug from 'rehype-slug'

这些import的每一行都是这个文件中使用的一个已安装的包。每个包的实际作用现在并不重要；我只想提请注意import 语法。这就是我们在实际的代码文件中使用 包的方式；我们告诉JavaScript要导入什么 ，从哪里导入。然后我们就可以在我们的代码中调用它。

这种语法被称为 "ES6导入"，这一点很重要（明白吗？），因为它是基于浏览器的JavaScript和Node JavaScript都同意使用的标准。

在此之前，Node JavaScript使用（而且经常仍在使用）一种稍有不同的语法，称为CommonJS。如果你看到一个看起来像这样的导入，那就是旧的CommonJS风格。

const myPackage = require('package-name')

关于ES6风格的import ，还有一件关键的事情需要了解：这种语法是npm特有的，不是语言标准。

要明确的是：你可以 在正常的JavaScript中使用import 。这是语言的一个非常普通的功能。但是你需要提供一个相对路径，或者（在更现代的浏览器中）一个你要导入的东西的URL。像我们在这里看到的那样，仅仅使用一个带有包的lug的字符串，是无效的。

那么，如果它在技术上不是有效的代码，为什么还要使用它呢？因为处理这种类型的导入是npm为我们做的一件好事。当我们告诉npmimport somePackage from 'name' 为一个字符串时，npm会自动知道去搜索项目中已安装的包，以找到我们要求的导入。这使我们既不用输入繁琐的相对路径，也 不用真正知道我们的软件包在node_modules 的迷宫中的位置。

这可能不言而喻，但是：由于语法无效，你将无法成功地使用它，除非你的npm项目包括一个捆绑器或某种类型的编译器，将导入和模块处理成有效的浏览器代码。

构建最终网站

大多数像这样的npm项目有两个主要目的。

1. 帮助你开发你的网站或应用
2. 建立一个最终的、生产型的版本

SvelteKit也不例外。当我们完成了我们的（很棒的）开发服务器的设置并对我们的改动感到满意时，我们可以运行这个命令。

npm run build

如果你的开发服务器还在运行，你可以用Ctrl+C停止它，或者打开一个新的终端标签。你将不能在开发进程运行的同一个终端窗口中输入任何命令，因为它是一个活动的、持续的任务。

当我们运行build 命令时，SvelteKit会咀嚼项目中的所有文件，并吐出一个完全捆绑的、可随时部署的静态HTML、CSS和JavaScript文件的集合，而且速度相当快。你可以把这个文件集上传到任何你可以托管网站的地方。现代化的工具；良好的老式输出。

当构建命令完成后，你应该在你的项目文件夹的根部（即顶层）看到一个新的build 文件夹。如果你浏览一下，你会发现不再有.md 、.svelte ，或任何其他不能被浏览器读取的文件。所有的东西都被编译成纯粹的HTML、CSS和JavaScript，更不用说--正如你打开一个JavaScript或CSS文件所看到的--它们被彻底地最小化了，以尽可能小的 速度在浏览器中加载。

如果你愿意，你可以在构建完成后运行npm run preview ，看看编译后的网站如何在浏览器中加载。这里的区别是，内容将从最终的build 文件夹中加载，而不是像使用dev 命令时那样用预先编译好的文件即时构建。除非你在DevTools中打开网络标签（或尝试更新一些东西），否则你不会看到任何区别，但你会看到最终的产品。

这是一个可有可无的步骤，但我认为，考虑到我们在项目中投入的各种文件，以及最终的捆绑文件实际上有多小，这很酷，这要归功于这个项目中内置的惊人的构建工具，可以了解我们实际上最终有多少编译文件。(为了记录在案，这都是SvelteKit和Vite。)

现代部署实践

这是另一个话题，但现代部署通常不需要你运行build 命令并自己上传文件（尽管这仍然是一个选择）。相反，一个主机（如Netlify或Vercel**）**会直接连接到你的项目的GitHub repo，每当你向该 repo的主分支推送修改时，主机就会为你运行构建命令并自动部署编译后的文件

这就是这个前端开发新时代的许多极好的功能之一。不需要用FTP捣乱，也不需要手动把文件拖到任何地方；我们确信，当我们推送代码时，一切都会自动构建和部署，而我们不需要做任何事情

总结本期npm指南

如果你已经走到了这一步，那么恭喜你！你可以在这里找到你想要的东西。也谢谢你。祝贺你，因为这是个很长很长的读物。谢谢你，因为......嗯，这是个很长很长的阅读。

但是你做到了，而且希望你也学到了一些重要的东西。我在开始时提到，我的目标不是简洁，而是有效。这意味着我们涵盖了很多内容。在熟悉命令行之前，我们首先简要介绍了npm以及它在现代前端开发环境中的位置。从那里，我们分解了"Node "和"包管理器 "这两个术语，以准确理解npm是什么和做什么。一旦我们熟悉了包管理器在开发中扮演的角色，我们就直接进入npm，包括如何安装它，向项目添加包，设置命令，以及最后，如何跳入一个使用npm的现有项目。

我希望我们在这个npm指南中所涉及的一切，至少为你打开了一扇门，使你能够进一步探索npm，并在你准备好时提升水平。我经常需要重复一些事情，并尝试多种方法，才能真正沉浸其中。所以，如果你坐在那里感觉和以前一样困惑，那就多花点时间吧。反思你所知道的和你所学到的，然后再回来，或者在你准备好的时候尝试新的方法

指南的各章

1. 本指南到底是为谁准备的？
2. npm "到底是什么意思？
3. 命令行是什么？
4. Node是什么？
5. 软件包管理器是什么？
6. 如何安装npm？
7. 如何安装npm包？
8. npm命令到底是什么？
9. 如何安装一个现有的npm项目？ (You are here!)

---