React package.json配置参数详解

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  (https://juejin.cn/user/3544481220801815)"

另一种是对象形式:

"author": {
  "name" : "CUGGZ",
  "email" : "[email protected]",
  "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" : "[email protected]"
}

三、依赖配置

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"
}

你可能感兴趣的:(React,react.js,json,javascript)