模块 4.2

npm 与前端构建

Node.js、npm、Vite——一节课，把这几个名词彻底搞明白

零到全栈 · 李勃老师 · 2026

鸣谢 · THANK YOU

谢谢为我充电的朋友

谢谢你们用这种方式给我鼓励

e***r

耶***o

苏***_

E***l

强***呀

_***_

磨***染

A***8

J***3

躲***宝

R***酱

追***-

醉***点

4***啊

这一个多月 · THANK YOU

也谢谢常来看、常互动的你们

观看 Top 10

S***7

气***1

伤***8

伏***梦

陈***莱

k***8

小***棕

牧***白

爬***子

豆***僧

互动 Top 10

苏***_

小***歪

强***呀

D***w

j***n

知***a

澈***c

T***_

E***9

丷***丷

感谢关注、点赞、收藏、投币的你们

Vite

npm

Node.js

回顾 · 上一节

模块化改造，真的什么都好吗？

道理上

清晰、优雅

体验上

又累、又懵

RECAP · 4.1

上一节，其实记住两件事就够了

① 大方向

模块化，势在必行

前端发展到今天，迟早都要走这一步——这是规矩，不是选择。

② 一个副作用

改完，必须走服务器

双击 index.html 直接打开，从此不好使了。

可"看一眼效果都得走一趟服务器"——是不是特别难受？这一节，咱们就来根治这种难受。

THREE PAINS

学到现在，还剩三件难受事

这三件，靠手动管治不利索。好消息是——有一类工具，专门收拾它们。

三方拉扯 · 谁来调停

工程治理

更规范、更安全，好维护好扩展

开发体验

写得越简单、顺手越好

用户体验

加载更快、资源更少

WHAT IT DOES · 三件事

构建工具，可以替你干这三件事

这三件，正好一一对上刚才那三件难受。

MEET VITE

构建工具，我们选 Vite

前浪 · webpack

早些年构建工具里的当红炸子鸡，很多老项目还在用。

现在 · Vite

这几年前端构建的首选，最"夯"的那一个。

Vite 是个法语词，意思就是"快"，读 /viːt/。下面，咱们就把它请进项目。

PREREQUISITE · NODE.JS

想跑 Vite，先得有"运行 JS 的环境"

你可能熟悉的

要跑 .py，先装 Python

要运行 .xlsx，先装 Excel

同一个道理

要在浏览器外跑 JS，先装 Node.js

Vite 是命令行工具，得在浏览器之外、你电脑上跑。

# 装完，新开终端验证（两条都吐版本号就成）
node -v      v20.x.x
npm -v       10.x.x   # npm 跟着 Node 白送，不用单独装

包管理 · NPM

关于 npm，先记住这几点

跟着 Node 一起装——装好 Node.js，npm 就自动有了，不用单独装。

用来装 js 工具和库——和你学过的 apt、brew 是一类，一个"应用商店"。

默认装进"当前项目"——不是装到整台电脑，每个项目各装各的、互不打架。

用之前一般先 init——先 npm init 把项目初始化，再用它装东西。

（其实 npm 还不止是个"应用商店"——这个扣子，后面解开。）

了解 .json 格式

{
  "name": "张三",
  "age": 21,
  "isStudent": true,
  "address": {
    "city": "北京",
    "zipCode": "100084"
  }
}

键值对 · 值可嵌套 · 注意逗号：每项末尾都有，最后一项没有。

PACKAGE.JSON

package.json 那一堆字段，哪些要管？

留这俩就行

name · 项目叫啥，默认拿文件夹名
version · 版本号，默认 1.0.0

其余的，删掉

description / main / type …
发布 npm 包才用得上，我们用不上
它就是个文本文件，删几行没事

npm init 没有黑魔法——就是生成个文本文件。把 name、version 之外的都删掉，这份"账"清清爽爽、现在还是空的；等装了东西，npm 会自动往里加回有用的内容。

INSTALL VITE

装 Vite——注意那个 -D

npm install -D vite

-D = 开发依赖 = 脚手架

Vite 是帮你干活的工具——盖房子时用，盖完就撤，不进最终的网站。这类装的时候加 -D。

跑完发生了什么

冒出 node_modules（东西都堆这儿）；package.json 自动记上 devDependencies。

还冒出个 package-lock.json，把每个包的精确版本锁死，换台电脑也装得一模一样——它要提交 git。

A RULE TO REMEMBER

源代码 ≠ 运行的代码

你维护的：源代码

js/、css/ 那些——多文件、好读。改网站永远改这份。

真正上线跑的：dist

少文件、压缩过、改了名。别手动改它——下次一 build 就被覆盖。

dev 跑源码图改得快；build 出的 dist 才是给生产服务器跑的版本；preview 本地验一眼。

THREE COMMANDS · 各管一段

理一理：这三条命令，各管什么

./node_modules/.bin/vite          # 写代码时 · 跑源码，热更新、改得快
./node_modules/.bin/vite build    # 要上线 · 产出 dist（给生产服务器跑的版本）
./node_modules/.bin/vite preview  # 上线前 · 本地起服务，预览 dist 对不对

SHORTCUTS · NPM RUN

那一长串太累：npm run 来帮忙

在 package.json 里登记别名

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

以后就这么短

npm run dev
npm run build
npm run preview

扣子解开：npm 不止"装/卸"，它还兼了个"项目管家"——认 package.json。npm run dev 跑的不是 npm 自己的功能，而是你写在 scripts 里的命令，它照本宣科替你跑一遍。

.GITIGNORE

有些东西，不该提交 Git

node_modules

照着 package.json，跑一次 npm install 就能重装出来。

dist

照着源代码，跑一次 npm run build 就能重新打包出来。

# .gitignore
node_modules
dist

它俩都能随时重新生成。Git 里提交的永远是"源头"——你的代码 + package.json / package-lock.json。

ONE MORE THING

既然有了 npm，让它来管 anime

npm install animejs   # 注意：没有 -D
# 再把 import 里那行长网址，换成一个干净的名字：
import { animate } from "animejs";

dependencies = 房子的砖

animejs 会被打进最终产物、跟着上线——网站运行时真在用它。

devDependencies = 脚手架

vite 帮你把房子盖好，盖完就撤——上线的网站里没有它。

两条命令长得像，角色却天差地别：一个是库、一个是工具。anime 那条 CDN 尾巴，到这儿收干净了。

工程化的地基，铺平了
有了它，下一节才真正有意思

4.1 模块化、4.2 构建，把工程化的底子打好了。下一节，我们请出现代前端真正的主角——React，顺便也聊聊 Vue。

零到全栈 · 模块 4.2 完