NPM 和 package.json 文件简介

NPM 和 package.json 文件简介

一、NPM不只是包管理器

1. NPM简介

NPM是Node.js的官方的包管理工具,当你node.js安装好了之后,npm也随着安装好,通过npm -v 可以看到当前安装的版本号;

  • 截至目前存放了已超过200完的开源包,比如Express、Axios、react、vue等
  • 它可以帮你下载你想要的包,也可以上传你自己的包,帮你管理你项目中间的依赖
  • 快速生成脚手架,可以通过npm init快速生成package.json

2. 常见NPM命令

js 复制代码
npm init -y //初始化项目,会生成package.json
npm install express //安装express依赖,会记录再dependencies中
npm install --save-dev jest //安装开发依赖,开发测试或者打包中使用
npm install -g nodemon //全局安装依赖包,在任何地方都可以使用
npm uninstall express //删除包,也同时会在package.json中删除
npm install //读取package.json中需要的包,然后全部安装到node_modules中

3.node_modules是什么

执行npm install的时候会将所有的依赖包都安装到这个文件夹中,这个文件夹通常非常的庞大,在使用git提交的时候千万不要将这个文件夹提交上去,可以通过.gitignore去忽略它;

二、package.json项目的"说明书"

package.json是一个json格式的文件,它一般存在于项目的根目录,描述了项目的元信息以及依赖关系。

1.package.json的基本结构

js 复制代码
{
  "name": "my-awesome-project",  //项目名称,必填
  "version": "1.0.0", //项目版本,必填
  "description": "这是我学习 Node.js 的第一个项目",  //项目描述
  "main": "index.js", //指定项目的入口
  "scripts": {   //最实用字段,定义一些脚本命令,可以使用npm run <脚本名称>
    "start": "node index.js",
    "test": "jest"
  },
  "keywords": ["nodejs", "tutorial"],
  "author": "你的名字",  //项目作者
  "license": "MIT",
  "dependencies": {   //项目运行时候需要的包
    "express": "^4.18.2"
  },
  "devDependencies": {   //项目开发阶段需要的包
    "jest": "^29.5.0"
  }
}

三、实际安装常用的包

1.slugify

它是一个将任何文本转换成URL友好的slug短链接,我们现在来安装它

js 复制代码
npm i sluify
  • 安装好了我们就可以去使用它
js 复制代码
const slugify = require('slugify'); //引入模块
    const slugs = slugify('HELLO WORLD',{lower:true});//将传入的字符串小写
    console.log(slugs);

2. nodemon

当我们修改代码的时候,每次都需要手动重启服务器,这个工具就是为了让我们解决这个问题的,但是目前node.js已经有了--watch模式,nodemon已经不太常用了;这里简单描述一下

js 复制代码
//全局安装
npm i -g nodemon --save-dev
  • 然后我们可以将nodemon设置为默认的脚本
js 复制代码
 "scripts": {
    "start": "nodemon index.js"
  },
  • 这样我们通过npm start命令就可以直接使用nodemon启动服务器

相关推荐
栀椩5 分钟前
Electron 内嵌页面跨域问题(CORS/PNA)解决全记录
前端·javascript·electron
asaotomo10 分钟前
截图识题、AI 讲解、笔记沉淀:Chrome 扩展体验
前端·chrome·笔记
前端架构师-老李12 分钟前
HTML与CSS基础第五课—HTML的空格、换行、横线相关知识
前端·css·html
SEO_juper13 分钟前
Chrome 扩展一键查看当前页面 SEO 信息:不用切页面,点一下全出来
前端·javascript·chrome
Nymph_Zhu20 分钟前
vue3+element-plus 文件上传
前端·typescript·vue3·element-plus
echome88826 分钟前
CSS 布局:Flex 和 Grid 怎么选,附常见坑
前端·css·html
计算机魔术师32 分钟前
科技巨头砸7400亿押注AI,为什么苹果成了唯一赢家?
前端
QianhangQianping42 分钟前
撤销重做不是「存快照」:一个可视化编辑器的Operation 设计
java·前端·数据库·typescript·编辑器·前端架构·撤销重做
Nymph_Zhu1 小时前
pdf转换markdown预览及内容互相点击定位
前端·pdf·vue3·markdown·element-plus
计算机魔术师2 小时前
Google 一天蒸发5000亿,Reddit 靠 AI 训练喂得饱自己却饿死
前端