package.json 概述
1、在 nodejs 项目中，package.json 是管理其 依赖 的配置文件
2、通常我们在初始化一个 nodejs 项目的时候会会生成这几个以下这几个文件
npm init 【 初始化 nodeJs 项目 】
1、node_modules
2、package.json
3、package.lock.json
3、package.json 中包含了项目本身的 元数据,以及项目的 子依赖 信息 【 如 dependicies 等 】
4、pack.json 文件示例
{
"name": "webpack_demo",
"version": "1.0.0",
"description": "学习工程化的项目示例",
"main": "index.js",
"scripts": {
"dev": "webpack serve --progress --config ./webpack.config.js"
},
"keywords": [],
"author": "caix",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.7.3",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"@babel/core": "^7.20.12",
"@babel/preset-env": "^7.20.2",
"@vue/compiler-sfc": "^3.2.45",
"babel-loader": "^9.1.2",
"clean-webpack-plugin": "^4.0.0",
"vue": "^3.2.36",
"vue-loader": "^17.0.1"
}
}
package.json 配置
package.json 配置分类
1、package.json 里面有许许多多的配置，与项目息息相关
2、package.json 常见的配置 大致可分为 7 类
1、描述配置
2、文件配置
3、脚本配置
4、依赖配置
5、发布配置
6、系统配置
7、第三方配置
描述配置
描述配置 主要是项目的 基本信息，包括 名称，版本，描述，仓库，作者等，部分会展示在 npm 官网上
1、name 【 "name": "webpack_demo" 】
项目 的名称，如果是第三方包的话，其他人可以通过该名称使用 npm install 进行安装
2、version 【 "version": "2.0.3" 】
项目 的版本号，开源项目的版本号通常遵循 semver 语义化规范，具体规则如下所示
1、2 代表主版本号 Major，通常在涉及重大功能更新，产生了破坏性变更时会更新此版本号
2、0 代表次版本号 Minor，在引入了新功能，但未产生破坏性变更，依然向下兼容时会更新此版本号
3、3 代表修订号 Patch，在修复了一些问题，也未产生破坏性变更时会更新此版本号
提示 name + version 能共同构成一个完全唯一的项目标识符
3、repository
项目 的仓库地址以及版本控制信息
"repository": {
"type": "git",
"url": "https://github.com/facebook/react.git",
"directory": "packages/react"
}
4、description 【 "description": "学习工程化的项目示例" 】
项目的描述，会展示在 npm 官网，让别人能快速了解该项目
5、keywords
1、项目的技术关键词，比如 Ant Design 组件库的 keywords 如下
"keywords": [
"ant",
"component",
"components",
"design",
"framework",
"frontend",
"react",
"react-component",
"ui"
],
2、好的关键词可以帮助别人在 npm 官网上更好地检索到此项目，增加曝光率
6、homepage 【 "homepage": "https://reactjs.org/" 】
项目主页的链接，通常是项目 github 链接，项目官网或文档首页
7、bugs 【 "bugs": "https://github.com/vuejs/core/issues" 】
项目 bug 反馈地址，通常是 github issue 页面的链接
8、license 【 "license": "MIT" 】
1、项目的开源许可证
2、项目的版权拥有人可以使用开源许可证来限制源码的使用、复制、修改和再发布等行为
3、常见的开源许可证有 【 BSD、MIT、Apache、ISC 】等
9、author 【 "author": "caix" 】
项目的作者
文件配置
包括项目所包含的文件，以及入口等信息
1、files
1、项目在进行 npm 发布时，可以通过 files 指定需要跟随一起发布的内容来控制 npm 包的大小，避免安装时间太长
2、发布时 默认会包括 package.json，license，README 和 main 字段里指定的文件
3、发布时 忽略 node_modules，lockfile 等文件
4、可以指定更多需要一起发布的内容 【 单独的文件 整个文件夹 通配符匹配 】
"files": [
"filename.js",
"directory/",
"glob/*.{js,json}"
]
5、一般 files 里会指定构建出来的产物以及类型文件
6、src，test 等目录下的文件不需要跟随发布
2、type
1、在 node 支持 ES 模块后，要求 ES 模块采用 .mjs 后缀文件名
2、只要遇到 .mjs 文件，就认为它是 ES 模块
3、如果不想修改文件后缀，就可以在 package.json 文件中，指定 type 字段为 module
"type": "module"
这样所有 .js 后缀的文件，node 都会用 ES 模块解释
3、main
1、项目发布时，默认会包括 package.json，license，README 和 main 字段里指定的文件
2、main 字段里指定的是项目的入口文件，在 browser 和 Node 环境中都可以使用
3、如果不设置 main 字段，那么入口文件就是根目录下的 index.js
3、browser
1、main 字段里指定的入口文件在 browser 和 Node 环境中都可以使用
2、如果只想在 web 端使用，不允许在 server 端使用，可以通过 browser 字段指定入口
"browser": "./browser/index.js"
4、module
1、项目也可以指定 ES 模块的入口文件，这就是 module 字段的作用
"module": "./index.mjs"
2、当一个项目同时定义了 main，browser 和 module，像 webpack，rollup 等构建工具会感知这些字段，并会根据环境以及不同的模块规范来进行不同的入口文件查找
"main": "./index.js",
"browser": "./browser/index.js",
"module": "./index.mjs"
3、webpack 构建项目时默认的 target 为 'web'，也就是 Web 构建，它的 resolve.mainFeilds 字段默认为 ['browser', 'module', 'main']
module.exports = {
//...
resolve: {
mainFields: ['browser', 'module', 'main'],
},
};
会按照 browser -> module -> main 的顺序来查找入口文件
5、exports
1、node 在 14.13 支持在 package.json 里定义 exports 字段，拥有了条件导出的功能
2、exports 字段可以配置不同环境对应的模块入口文件，并且当它存在时，它的优先级最高
3、比如使用 require 和 import 字段根据模块规范分别定义入口
"exports": {
"require": "./index.js",
"import": "./index.mjs"
}
这样的配置在使用 import 'xxx' 和 require('xxx') 时会从不同的入口引入文件
6、workspaces
1、项目的工作区配置，用于在本地的根目录下管理多个子项目
2、可以自动地在 npm install 时将 workspaces 下面的包，软链到根目录的 node_modules 中，不用手动执行 npm link 操作
3、workspaces 字段接收一个数组，数组里可以是文件夹名称或者通配符
"workspaces": [
"workspace-a"
]
脚本配置
1、script
1、指定项目的一些内置脚本命令，这些命令可以通过 npm run 来执行
2、通常包含项目开发，构建 等 CI 命令
"scripts": {
"build": "webpack"
}
3、我们可以使用命令 npm run build / yarn build 来执行项目构建
4、除了指定基础命令，还可以配合 pre 和 post 完成命令的前置和后续操作
2、config
1、config 用于设置 scripts 里的脚本在运行时的参数，比如设置 port 为 3001
"config": {
"port": "3001"
}
2、在执行脚本时，我们可以通过 npm_package_config_port 这个变量访问到 3001
依赖配置
项目可能会依赖其他包，需要在 package.json 里配置这些依赖的信息
1、dependencies
1、运行依赖，也就是项目生产环境下需要用到的依赖
2、如 react，vue，状态管理库以及组件库等
3、使用 npm install xxx 或 npm install xxx --save 时，会被自动插入到该字段中
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
2、devDependencies
1、开发依赖，项目开发环境需要用到而运行时不需要的依赖
2、用于辅助开发，通常包括项目工程化工具比如 webpack，vite，eslint 等
3、使用 npm install xxx -D 或 npm install xxx --save-dev 时，会被自动插入到该字段中
"devDependencies": {
"webpack": "^5.69.0"
}
3、其他依赖配置 ....
发布配置
主要是和项目发布相关的配置
1、private
如果是私有项目，不希望发布到公共 npm 仓库上，可以将 private 设为 true
"private": true
2、publishConfig
1、publishConfig 就是 npm 包发布时使用的配置
2、比如在安装依赖时指定了 registry 为 taobao 镜像源，但发布时希望在公网发布，就可以指定 publishConfig.registry
"publishConfig": {
"registry": "https://registry.npmjs.org/"
}