前端项目中package.json到底是什么,又充当着什么作用呢?一文来带你了解package.json!

简介: 前端项目中package.json到底是什么,又充当着什么作用呢?一文来带你了解package.json!

大家好,我是纸飞机,想必大家都在项目中经常看见package.jsonpackage-lock.jsonnode_modules这三剑客,那么他们到底是什么呢?又有什么作用呢?今天就来带你们理一遍!

一、引读

在大家的印象中,说明书具有哪些要素?例如一盒药。

image.png

就像这份说明书,它有:药品名称、成分、类别等等说明!package.json同样如此,所以可以毫不夸张的说,它也是一份说明书!那么我们的package.json到底说明了什么呢?下面就进入正题为您一一讲解。

二、package.json说明了哪些内容

文件展示:

{
  "name": "firstapp",
  "version": "0.1.0",
  "author": "zhangsan <zhangsan@163.com>",
  "description": "我就是世界上第一个node.js程序",
  "keywords": ["node.js", "javascript"],
  "private": true,
  "bugs": {
    "url": "http://path/to/bug",
    "email": "bug@example.com"
  },
  "contributors": [{
    "name": "张不烂",
    "email": "lisi@example.com"
  }],
  "repository": {
    "type": "git",
    "url": "https://path/to/url"
  },
  "homepage": "http://necolas.github.io/normalize.css",
  "license": "MIT",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1"
  },
  "devDependencies": {
    "browserify": "~13.0.0",
    "karma-browserify": "~5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "bin": {
    "webpack": "./bin/webpack.js"
  },
  "main": "lib/webpack.js",
  "module": "es/index.js",
  "eslintConfig": {
    "extends": "react-app"
  },
  "engines": {
    "node": ">=0.10.3 <0.12"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "style": [
    "./node_modules/tipso/src/tipso.css"
  ],
  "files": [
    "lib/",
    "bin/",
    "buildin/",
    "declarations/",
    "hot/",
    "web_modules/",
    "schemas/",
    "SECURITY.md"
  ]
}

image.png

image.png

image.png


Tip:加粗部分请重点了解。

那么这么个文件如何创建呢?

先新建文件夹再:

npm init -y

这样就初始化了一个package.json。


三、package-lock.json

用一句话来概括很简单,就是锁定安装时的包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致。

四、node_modules

node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。在node.js中模块与文件是一一对应的,也就是说一个node.js文件就是一个模块。


modules(模块):


在node.js中模块与文件是一一对应的,也就是说一个node.js文件就是一个模块,文件内容可能是我们封装好的一些JavaScript方法、jsON数据、编译过的C/C++拓展等,在关于node.js的误会提到过node.js的架构。


其中http、fs、net等都是node.js提供的核心模块,使用C/C++实现,外部用JavaScript封装。


require搜索module方式:


node.js中模块有两种类型:核心模块和文件模块,核心模块直接使用名称获取,比如最长用的http模块。

var http = require('http');

在上面例子中我们使用了相对路径 './test'来获取自定义文件模块。


node加载模块的方法:


核心模块优先级最高,直接使用名字加载,在有命名冲突的时候首先加载核心模块,文件模块只能按照路径加载。(可以省略默认的.js拓展名,不是的话需要显示声明书写)


绝对路径

相对路径  

20210906230155907.gif

相关文章
|
6天前
|
存储 资源调度 JavaScript
package.json——从vue的package.json来详细说明package.json内容
package.json——从vue的package.json来详细说明package.json内容
21 0
|
4天前
|
前端开发 Java 编译器
【前端学java】java基础练习缺少项目?看这篇文章就够了!(完结)
【8月更文挑战第11天】java基础练习缺少项目?看这篇文章就够了!(完结)
13 0
|
4天前
|
前端开发 JavaScript
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
本文介绍了在Vue3 + ElementPlus项目中使用`computed`属性实现前端静态分页的方法,并提供了详细的示例代码和运行效果。
16 1
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
|
3天前
|
前端开发 数据库
SpringBoot+Vue+token实现(表单+图片)上传、图片地址保存到数据库。上传图片保存位置到项目中的静态资源下、图片可以在前端回显(二))
这篇文章是关于如何在SpringBoot+Vue+token的环境下实现表单和图片上传的优化篇,主要改进是将图片保存位置从磁盘指定位置改为项目中的静态资源目录,使得图片资源可以跨环境访问,并在前端正确回显。
|
4天前
|
前端开发 Java 编译器
【前端学java】java基础练习缺少项目?看这篇文章就够了!(17)
【8月更文挑战第11天】java基础练习缺少项目?看这篇文章就够了!
11 0
【前端学java】java基础练习缺少项目?看这篇文章就够了!(17)
|
16天前
|
数据采集 资源调度 JavaScript
Node.js 适合做高并发、I/O密集型项目、轻量级实时应用、前端构建工具、命令行工具以及网络爬虫和数据处理等项目
【8月更文挑战第4天】Node.js 适合做高并发、I/O密集型项目、轻量级实时应用、前端构建工具、命令行工具以及网络爬虫和数据处理等项目
30 5
|
19天前
|
Web App开发 开发框架 编解码
在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
|
19天前
|
开发框架 前端开发 JavaScript
在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理
在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理
|
19天前
|
开发框架 前端开发 JavaScript
在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理
在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理
|
1月前
|
前端开发 应用服务中间件 nginx
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些

热门文章

最新文章