React package.json配置参数详解

2023-10-31

React package.json配置参数详解

一、必须属性
二、描述属性
三、依赖配置
四、脚本配置
五、文件&目录

package.json文件想必大家都不陌生，一般的项目根目录下都会有这个文件，文件中定义了项目所需要的各个模块，以及这个项目的配置信息，例如名称、版本、许可证等。通过执行npm install命令，可以自动下载项目所需要的模块，也就是配置项目所需的运行环境和开发环境。

package.json 配置参数很多，大部分并不是必须的，一般都是name、version、main、author、dependencies、devDependencies这几个参数。

一、必须属性

1、name

"name": "Hello World",

name是一个必须字段，这个字段可能会在require()方法中被调用，所以名字要尽可能短。

注意：不要在name中包含js、node等字眼，这个名字最终会是url一部分、命令行的参数、目录名，所以不能以下划线或者其他符号开头。

2、 version

version 字段表示该项目包的版本号，它是一个字符串。

版本号的命名遵循语义化版本 2.0.0 规范，格式为：「主版本号. 次版本号. 修订号」，通常情况下，修改主版本号是做了大的功能性的改动，修改次版本号是新增了新功能，修改修订号就是修复了一些 bug。

二、描述属性

1、description

description 字段用来描述这个项目包，它是一个字符串，可以让其他开发者在 npm 的搜索中发现我们的项目包。

2、author

author 顾名思义就是作者，表示该项目包的作者。它有两种形式，一种是字符串格式：

"author": "CUGGZ <xxxxx@xx.com> (https://juejin.cn/user/3544481220801815)"

另一种是对象形式：

"author": {
  "name" : "CUGGZ",
  "email" : "xxxxx@xx.com",
  "url" : "https://juejin.cn/user/3544481220801815"
}

3、repository

repository 表示代码的存放仓库地址，通常有两种书写形式。第一种是字符串形式：

"repository": "https://github.com/facebook/react.git"

除此之外，还可以显式地设置版本控制系统，这时就是对象的形式：

"repository": {
  "type": "git",
  "url": "https://github.com/facebook/react.git"
}

4、bugs

bugs 表示项目提交问题的地址，该字段是一个对象，可以添加一个提交问题的地址和反馈的邮箱：

"bugs": { 
  "url" : "https://github.com/facebook/react/issues",
  "email" : "xxxxx@xx.com"
}

三、依赖配置

1、dependencies，devDependencies

dependencies字段指定了项目运行所依赖的模块，devDependencies指定项目开发所需要的模块。

它们都指向一个对象，该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。

{
  "dependencies": { //在生产环境中需要用到的依赖
    "antd": "^3.23.6",
    "babel-plugin-import": "^1.12.2", // 项目依赖的包名以及相关的版本信息
    "customize-cra": "^0.8.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "react": "^16.8.2",
    "react-app-rewired": "^2.1.3",
    "react-dom": "^16.8.2",
    "react-picker": "^1.2.15",
    "react-redux": "^6.0.0",
    "react-scripts": "2.1.5",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": { //在开发、测试环境中用到的依赖
    "node-sass": "^4.11.0",
    "react-router-dom": "^4.3.1"
  }
}

在添加项目依赖的时候：

npm install react --save 表示模块写入的是dependencies属性
npm install react --save-dev 表示模块写入的是devDependencies属性

对应版本的指定，可以分为以下几种：

指定版本：例如5.1.1，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。
~指定版本：例如 ~5.0.1，表示安装5.0.x的最新版本（不低于5.0.1），但是不安装5.1.x，也就是说安装时不改变大版本号和次要版本号。
ˆ指定版本：例如ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。
latest：安装最新版本。

2、peerDependencies

用来供插件指定其所需要的主工具的版本。

{
  "name": "chai-as-promised",
  "peerDependencies": {
    "chai": "1.x"
  }
}

上面代码指定，安装chai-as-promised模块时，主程序chai必须一起安装，而且chai的版本必须是1.x。如果你的项目指定的依赖是chai的2.0版本，就会报错。

注意，从npm 3.0版开始，peerDependencies不再会默认安装了。

四、脚本配置

1、scripts

scripts指定了运行npm的命令行缩写，下面的设置指定了npm run preinstall、npm run postinstall、npm run start、npm run test时，所要执行的命令：

"scripts": {
    "preinstall": "echo here it comes!",
    "postinstall": "echo there it goes!",
    "start": "node index.js",
    "test": "tap test/*.js"
}

2、config

config 字段用来配置 scripts 运行时的配置参数，如下所示：

"config": {
  "port": 3000
}

如果运行 npm run start，则 port 字段会映射到npm_package_config_port环境变量中：

console.log(process.env.npm_package_config_port) // 3000

用户可以通过npm config set foo:port 3001 命令来重写 port 的值。

五、文件&目录

1、 main

main 字段用来指定加载的入口文件，在 browser 和 Node 环境中都可以使用。如果我们将项目发布为 npm 包，那么当使用 require 导入 npm 包时，返回的就是 main 字段所列出的文件的 module.exports 属性。如果不指定该字段，默认是项目根目录下的 index.js。如果没找到，就会报错。

该字段的值是一个字符串：

"main": "./src/index.js"

2、bin

bin项用来指定各个内部命令对应的可执行文件的位置。

"bin": {
  "someTool": "./bin/someTool.js"
}

上面代码指定，someTool 命令对应的可执行文件为 bin 子目录下的 someTool.js。Npm会寻找这个文件，在node_modules/.bin/目录下建立符号链接。

3、browser

browser指定该模板供浏览器使用的版本。Browserify这样的浏览器打包工具，通过它就知道该打包那个文件。

"browser": {
  "tipso": "./node_modules/tipso/src/tipso.js"
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)