package.json 依赖 和require加载机制

366 阅读2分钟

本文已参与「新人创作礼」活动, 一起开启掘金创作之路。

npm初始化

package.json

当我们使用npm init -y 初始化后,会生成一个 package.json 文件

package.json 是当前项目(或者包)的说明或配置文件

name:项目或包的名字

version:项目或包的版本

main:项目或包的入口文件

script:命令及简写形式

dependencies:依赖,表示当前项目或包,依赖哪些其他模块

1661434652253.png

main()入口文件

它指定了模块的入口是哪个文件

当别人通过 require() 加载我们的包时,加载的就是 main 字段指定的文件

1661434807882.png 比如上面我们加载这个包时,记载的就是"index.js"

生产依赖和开发依赖

1.生产依赖(项目依赖):就是项目想要正常运转所需要的第三方模块;

echarts lodash moment jquery axios bootstrap

专门放到: dependencies 节点;

命令: npm i 包名 --save 或者 -S 或者 不写

2.开发依赖:只在开发期间使用,进入生产环境就不用了的第三方模块;

webpack webpack-cli gulp gulp-cli

专门放到: devDependencies 节点;

命令: npm i 包名 --save-dev 或者 -D

下载命令

npm i 可以下载所有的第三方依赖(前端人员必备)

npm i --production 只下载项目依赖,不下载开发依赖(运维人员用)

require加载机制

  1. 判断缓存中有没有正在加载的模块,如果有,使用缓存中的内容,如果没有,那么表示第一次加载,加载完会缓存
  1. 判断模块名有没有带路径(./)
  1. 模块名中有路径,加载自定义模块(自己写的文件)const xx = require('./xx')

优先加载同名文件,加载一个叫做 xx 的文件

再次加载js文件,加载 xx.js 文件

再次加载json文件,加载 xx.json 文件

如果上述文件都没有,则报错 “Cannot find module './xx'”

  1. 模块名没有路径,优先加载核心模块,如果没有核心模块,则加载第三方模块
  1. 加载第三方模块的查找方式

优先在当前文件夹的node_modules里面查找第三方模块

在当前文件夹的上级目录的node_modules里面查找第三方模块

继续向上层文件夹查找第三方模块