在本地运行代码

这个课程中的所有内容都在 Scrimba 的浏览器里运行，你完全不用离开。但有时候你可能想把项目放到自己的机器上：继续在课程之外开发它、使用自己喜欢的编辑器、或者把它放进自己的 Git 仓库。

这一页就是讲这个的。这是可选的，课程后面的任何内容都不依赖它。

首先需要什么

一个支持的 Node.js LTS 版本。 推荐 Node 24，Node 22 也可以用。检查你装的是什么：

$ node --version
v24.18.0

如果显示 "command not found"，请从 nodejs.org 安装标记为 LTS 的版本。

npm。 Node 自带 npm，Scrimba 下载的项目就是 npm 项目。检查一下是否可用：

$ npm --version
11.18.0

Juno首先需要什么 使用支持的 Node.js LTS 版本：Node 24 是推荐的，Node 22 也能用。课程的最低要求是 Node 20.12，因为那是 Node 加入内置环保文件 API 的版本，但满足兼容性最低要求和运行一个有维护的版本是两回事。

获取代码

在 Scrimba 编辑器中右键点击项目标题，选择 Download as Zip。解压下载的文件，然后在终端里进入那个文件夹：

$ cd intro-to-ai-agents-lesson

看一下里面有什么。你应该能看到 server.js、package.json、package-lock.json、environment.js、vite.config.js 和课程相关的 JavaScript 文件。

Juno获取代码 把项目下载为 Zip，解压，然后用 cd 进入包含 package.json 的文件夹。这个文件夹就是你运行本页所有命令的地方。

安装和运行

这是 Scrimba 和你的机器之间唯一真正的区别，也是最容易被忽略的一步。

在 Scrimba 上，AI_URL、AI_KEY 和 AI_MODEL 存在你的账户设置里，Scrimba 会把它们注入到正在运行的项目中。这就是为什么浏览器版本没有 .env 文件：那里用不上，而且在共享编辑器里保存密钥也不是个好主意。

你的机器上没有人会自动注入它们，所以你得自己提供。打开 Scrimba 账户设置，复制这三个值，然后把它们保存在项目文件夹里的一个叫 .env 的文件中，放在 package.json 旁边：

AI_URL=<从 Scrimba 设置粘贴>
AI_KEY=<从 Scrimba 设置粘贴>
AI_MODEL=<从 Scrimba 设置粘贴>

一行一个，没有引号，= 周围也没有空格。项目启动时 environment.js 会读这个文件，用的是 Node 内置的环保文件支持。这就是前面为什么要设置版本最低要求的原因。

如果你把这个项目放进自己的 Git 仓库，把 .env 排除在外。AI_KEY 是一个凭证，如果一个密钥被推送到公开仓库，你就得换掉它。在项目文件夹里加一行 .gitignore 就解决了：

.env

Git 手册在 忽略文件和最佳实践 中讲了这个更广泛的习惯。

有了这个之后，安装依赖：

$ npm install

npm 从 package.json 读依赖列表，从 package-lock.json 读精确版本，这样你就能得到课程录制时用的同一个依赖树。它会生成一个 node_modules 文件夹，这个文件夹很大而且可以重建，所以它也应该在 .gitignore 里。

然后启动项目：

$ npm run dev

  ➜  Local:   http://localhost:5173/

打开它打印出来的地址。在默认的 Vite 配置下是 http://localhost:5173/，读输出结果比猜测要好，下一节会说明为什么。

Juno安装和运行 从 Scrimba 设置里把 AI_URL、AI_KEY 和 AI_MODEL 复制到 package.json 旁边的 .env 文件里，因为在平台外没人会自动注入它们。然后运行 npm install 和 npm run dev。在提交任何东西之前，把 .env 加到 .gitignore 里：密钥一旦被推送到公开仓库，你就得换掉它。

当端口已被占用时

开发服务器需要一个空闲的端口，5173 是 Vite 的默认端口，所以任何其他运行 Vite 的东西都可能已经占用了它。这不会破坏你的项目。Vite 会尝试下一个端口，告诉你，然后继续：

$ npm run dev
Port 5173 is in use, trying another one...

  ➜  Local:   http://localhost:5174/

如果 5174 也被占用了，它会尝试 5175，然后 5176，一直往上数，直到找到一个空闲的。所以端口无关紧要，你永远不用选择一个。读 Vite 打印的那行 URL，而不是从记忆里输入 localhost:5173，这个习惯会让你之后不用费力查"为什么页面加载不了"。

如果你真的想要特定的端口，传给它：

$ npm run dev -- --port 4000

前面的 -- 是告诉 npm 把后面的部分交给 Vite，而不是 npm 自己拿着这个标志。

有一种情况表现不同。如果项目在 vite.config.js 里设置了 strictPort，Vite 会停止而不是往上数，并打印 Port 5173 is already in use。这时你要么退出占用端口的东西，要么像上面一样传 --port。

Juno当端口已被占用时 Vite 不需要特定的端口。如果 5173 被占用了，它会数上去到 5174、5175，打印出落地的那个端口，两种情况下都能跑。读打印出来的 URL，而不是从记忆里输入 localhost:5173，遇到罕见的需要特定端口的情况时才用 npm run dev -- --port 4000。

接下来去哪儿

你现在有的是一个正常的 npm 项目，所以你学到的任何关于 Node 工具的东西都直接适用于它。如果你想把它放进版本控制里，你的第一个仓库 会带你走完第一次提交，上面的 .gitignore 是你在做提交之前要设置的东西。

课程后面的任何内容都不依赖这些。如果本地副本给你添麻烦，Scrimba 版本还在那里，还能用。