前端入坑——使用npm管理前端应用

最新推荐文章于 2025-07-03 14:16:52 发布

原创最新推荐文章于 2025-07-03 14:16:52 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #nodejs #npm #包管理

nodejs 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何使用npm创建项目，包括初始化项目、配置package.json、安装与卸载包、管理依赖等关键步骤。同时，解析了package.json各项配置的意义，帮助读者掌握npm的核心功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、创建第一个npm项目，在windows下先创建一个文件夹再使用npm init命令。

npm init 会自动创建一个package.json文件过程中可以对该文件进行配置。如下图

E:\station>md test

E:\station>cd test

E:\station\test>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (test) test
version: (1.0.0) 1.0.0
description: TODO
entry point: (index.js) index.js
test command:
git repository:
keywords: key
author: lee
license: (ISC)
About to write to E:\station\test\package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "TODO",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "key"
  ],
  "author": "lee",
  "license": "ISC"
}

2、npm安装完成后的package.json中的一些参数的配置所代表的意义

{
  "name": "turn-web-ui",
  "version": "1.0.0",
  "description": "转盘活动ui",
  "main": "index.js",
  "scripts": {
    //脚本 npm run <脚本名称>
    "test": "test.js"
  },
  "repository": {
    "type": "git",
    "url": "git@192.168.99.125:newservice/turn-web-ui.git"
  },
  "keywords": [
    "turn-web-ui"
  ],
  "author": "lee seen",
  "license": "ISC",
  "dependencies": {
    //运行环境
  },
  "devDependencies": {
    //生产时环境

  },
  "engines": {
    //记录当前nodejs和npm版本
  },
  "publishConfig": {
    //向npm仓库发布自己的项目
  }
}

3、npm全局安装与本地安装

npm install <> -g 为全局安装否则为本地安装

本地安装会在当前项目中创建一个node_modules并将包安装到里面（如果有则不创建）

全局安装是安装到计算机中的在计算机的任何地方都可以用，本地安装是安装到当前项目中，只有当前项目才可以用。

约定俗成的，对于那些提供命令行工具的包进行全局安装，其它包本地安装。

4、使用npm install 安装package.json中的包

使用你npm install <> --save 可以在安装模块时，同时将安装的模块信息记录在 package.json 文件中(--save-dev会保存在开发依赖中的)

5、卸载安装的包 npm uninstall --save 同时卸载package.json中的记录

6、使用npm list 查看当前模块的依赖树（--depth=0只显示第一层 1则为现实第二层以此类推）

本次笔记就先记录到这。。。下次实践有更深入的研究再来。