• React package.json配置参数详解


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

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

    一、必须属性

    1、name

    "name": "Hello World",
    
    • 1

    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)"
    
    • 1

    另一种是对象形式:

    "author": {
      "name" : "CUGGZ",
      "email" : "xxxxx@xx.com",
      "url" : "https://juejin.cn/user/3544481220801815"
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5

    3、repository

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

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

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

    "repository": {
      "type": "git",
      "url": "https://github.com/facebook/react.git"
    }
    
    • 1
    • 2
    • 3
    • 4

    4、bugs

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

    "bugs": { 
      "url" : "https://github.com/facebook/react/issues",
      "email" : "xxxxx@xx.com"
    }
    
    • 1
    • 2
    • 3
    • 4

    三、依赖配置

    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"
      }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在添加项目依赖的时候:

    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"
      }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    上面代码指定,安装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"
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2、config

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

    "config": {
      "port": 3000
    }
    
    • 1
    • 2
    • 3

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

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

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

    五、文件&目录

    1、 main

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

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

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

    2、bin

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

    "bin": {
      "someTool": "./bin/someTool.js"
    }
    
    • 1
    • 2
    • 3

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

    3、browser

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

    "browser": {
      "tipso": "./node_modules/tipso/src/tipso.js"
    }
    
    • 1
    • 2
    • 3
  • 相关阅读:
    Clion学习
    使用CIntHeap 二叉堆进行A*路径搜索代码学习
    通过WinSCP实现Windows给Ubuntu(Linux)虚拟机传输数据
    SpringBoot使用@Value获取不到yaml中配置的值
    Win7下安装Docker(虚拟机win7)
    自动化产线集控系统(西门子CNC 840D/840DSL远程控制)
    Leetcode刷题详解——括号生成
    SpringCloud学习笔记 - 分布式配置中心 - config
    jenkins安装和配置(一):ubuntu 20.04 jenkins安装
    Java NIO模型(提供代码示例)
  • 原文地址:https://blog.csdn.net/fish_skyyyy/article/details/126160089