node.js 和npm 搭建项目基本流程

整个过程可以概括为以下四个关键阶段,下图为您清晰地展示了全貌:

flowchart TD

A["第一步:环境准备

安装Node.js"] --> B["第二步:项目初始化

创建项目清单package.json"]

B --> C["第三步:管理依赖

使用npm安装所需软件包"]

C --> D["第四步:编程与运行

编写代码并用node命令执行"]

步骤一:环境准备(一次性设置)

​​目标​​:在你的电脑上安装引擎(Node.js)和它的工具箱(npm)。

​​行动​​:访问 Node.js 官网,下载并安装 ​​LTS(长期支持)版本​​。

​​验证​​:安装完成后,打开终端(或命令提示符),输入以下命令并回车:

node -v

npm -v

​​如果成功​​,会显示版本号(例如 v20.18.0和 10.8.2)。这说明你的环境已就绪。

​​如果失败​​,会提示"命令未找到",请重新检查安装。

步骤二:初始化你的项目(每个新项目做一次)

​​目标​​:为你的项目创建一个"说明书"(package.json),用来记录项目信息和需要的工具。

​​行动​​:

在电脑上创建一个新的空文件夹,例如 my-project。

打开终端,导航到这个文件夹内。

输入命令并回车:

npm init -y

​​结果​​:此命令会瞬间生成一个 package.json文件。它就像是项目的​​身份证和菜单​​,初期记录项目名称、版本等基本信息。

步骤三:安装依赖(按需进行)

​​目标​​:为你项目安装需要的第三方库(比如要用Express框架来写网站)。

​​行动​​:在项目文件夹的终端中,使用 npm install命令。例如,要安装 Express 框架:

npm install express

​​发生了什么​​:

npm 会自动从网上仓库下载 express库及其所需的所有其他库。

这些库都被保存在项目下新创建的 node_modules文件夹中。

package.json文件会自动更新,在 "dependencies"字段中记录下你安装了 express及其版本号。

​​重要提示​​:node_modules文件夹​​永远不要​​手动备份或上传到代码仓库(如Git)。你只需要共享 package.json文件。别人拿到你的项目后,只需运行 npm install,npm 就会根据 package.json中的记录,自动重新安装所有依赖。

步骤四:编写代码并运行

​​目标​​:使用安装好的库来编写程序,并让它在Node.js环境中运行起来。

​​编写代码​​:在你的项目文件夹中创建一个文件,例如 app.js。然后写入以下代码:

// 1. 引入安装好的express库

const express = require('express');

const app = express();

// 2. 定义一个简单的路由

app.get('/', (req, res) => {

res.send('Hello World from Node.js!');

});

// 3. 启动服务器,监听3000端口

app.listen(3000, () => {

console.log('服务器运行在 http://localhost:3000');

});

​​运行程序​​:在终端中,运行以下命令:

node app.js

​​查看结果​​:打开浏览器,访问 http://localhost:3000,你将会看到页面上显示 "Hello World from Node.js!"。

💎 总结与核心逻辑

步骤

核心命令

关键产出

比喻

​​1. 装环境​​

获得 node和 npm命令

买好​​发动机和工具箱​​

​​2. 初始化项目​​

npm init -y

生成 package.json文件

写下​​项目菜单/清单​​

​​3. 安装依赖​​

npm install <包名>

生成 node_modules文件夹,更新 package.json

根据菜单​​进货​​,把食材放进仓库

​​4. 写代码并运行​​

node <文件名>.js

运行你的程序

​​点火启动​​发动机,让车跑起来

记住这个流程,你就掌握了 Node.js 和 npm 最基本的用法。希望这次更聚焦的阐述对您有帮助!

相关推荐
PHP实战开发录13 分钟前
PHP接口偶发变慢怎么查
前端·php·开发
向北丶42 分钟前
vite项目中配置alias别名
前端·vite
COOLMO研究AI1 小时前
Next.js App Router 中 sitemap、robots 与 canonical 的配置与排查
前端·web·js·网站优化
DyLatte1 小时前
AI 给了我 8 个优化方案,全都是对的,但没有一个有用
前端·后端·程序员
钝挫力PROGRAMER1 小时前
npx 与 npm 全局安装/更新/卸载
npm·npx·mcp·dsh
the局外人1 小时前
一座不够大的城市,装下了我毕业后的成长
前端·程序员·求职
涛涛ing2 小时前
周下载量1.1亿的Tailwind,为什么养不活自己?
前端
变与不变8062 小时前
JS事件机制精讲
前端·javascript
装备研究社2 小时前
Promise 的五个状态,90% 的人只说对了三个
前端
小聪7082 小时前
elpis-core 抽离 npm 包过程的难点和卡点
前端·架构