Vue 之 package.json文件解释说明

Love The Way You Lie 2024-04-06 13:50 69阅读 0赞

**目录**

一：什么是package.json文件？

二：package.json文件属性说明

三：生成package.json文件

四:版本号概述

--------------------

### 一：什么是package.json文件？ ###

什么是Node.js的模块（Module）？在Node.js中，模块是一个库或框架，也是一个Node.js项目。Node.js项目遵循模块化的架构，当我们创建了一个Node.js项目，意味着创建了一个模块，这个模块的描述文件，被称为package.json。  
通常情况下package.json内容出错，会导致项目出现bug，甚至阻止项目的运行。下面是normalize包的package.json文件：

{
      "name": "medpro",
      "version": "1.0.0",
      "description": "A Vue.js project",
      "author": "",
      "private": true,
      "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js"
      },
      "dependencies": {
        "axios": "^0.27.2",
        "element-ui": "^2.15.9",
        "qs": "^6.11.0",
        "vue": "^2.5.2",
        "vue-axios": "^3.4.1",
        "vue-router": "^3.0.1",
        "vuex": "^3.4.0",
        "vuex-along": "^1.2.13"
      },
      "devDependencies": {
        "autoprefixer": "^7.1.2",
        "babel-core": "^6.22.1",
        "babel-helper-vue-jsx-merge-props": "^2.0.3",
        "babel-loader": "^7.1.1",
        "babel-plugin-syntax-jsx": "^6.18.0",
        "babel-plugin-transform-runtime": "^6.22.0",
        "babel-plugin-transform-vue-jsx": "^3.5.0",
        "babel-preset-env": "^1.3.2",
        "babel-preset-stage-2": "^6.22.0",
        "chalk": "^2.0.1",
        "copy-webpack-plugin": "^4.0.1",
        "css-loader": "^0.28.0",
        "extract-text-webpack-plugin": "^3.0.0",
        "file-loader": "^1.1.4",
        "friendly-errors-webpack-plugin": "^1.6.1",
        "html-webpack-plugin": "^2.30.1",
        "mockjs": "^1.1.0",
        "node-notifier": "^5.1.2",
        "optimize-css-assets-webpack-plugin": "^3.2.0",
        "ora": "^1.2.0",
        "portfinder": "^1.0.13",
        "postcss-import": "^11.0.0",
        "postcss-loader": "^2.0.8",
        "postcss-url": "^7.2.1",
        "rimraf": "^2.6.0",
        "semver": "^5.3.0",
        "shelljs": "^0.7.6",
        "uglifyjs-webpack-plugin": "^1.1.1",
        "url-loader": "^0.5.8",
        "vue-loader": "^13.3.0",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.5.2",
        "webpack": "^3.6.0",
        "webpack-bundle-analyzer": "^2.9.0",
        "webpack-dev-server": "^2.9.1",
        "webpack-merge": "^4.1.0"
      },
      "engines": {
        "node": ">= 6.0.0",
        "npm": ">= 3.0.0"
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ]
    }

### 二：package.json文件属性说明 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>&nbsp;&nbsp;<strong>name</strong></td> 
   <td>包名.</td> 
  </tr> 
  <tr> 
   <td>&nbsp;&nbsp;&nbsp;<strong>version</strong></td> 
   <td>包的版本号</td> 
  </tr> 
  <tr> 
   <td>&nbsp;&nbsp;<strong>description</strong>&nbsp;</td> 
   <td>&nbsp;包的描述</td> 
  </tr> 
  <tr> 
   <td>&nbsp;&nbsp;&nbsp;&nbsp;<strong>homepage</strong></td> 
   <td>包的官网URL</td> 
  </tr> 
  <tr> 
   <td>&nbsp;&nbsp;&nbsp;&nbsp;<strong>author</strong>&nbsp;</td> 
   <td>包的官网URL</td> 
  </tr> 
  <tr> 
   <td>&nbsp;&nbsp;&nbsp;<strong>contributors</strong>&nbsp;</td> 
   <td>包的其他贡献者</td> 
  </tr> 
  <tr> 
   <td>&nbsp;&nbsp;<strong>dependencies / devDependencies</strong>&nbsp;</td> 
   <td><strong>生产</strong>/<strong>开发</strong>环境依赖包列表。它们将会被安装在 node_module 目录下</td> 
  </tr> 
  <tr> 
   <td>&nbsp;<strong>repository</strong></td> 
   <td>包代码的Repo信息，包括type和URL，type可以是git或svn，URL则是包的Repo地址</td> 
  </tr> 
  <tr> 
   <td>&nbsp;&nbsp;<strong>main</strong>&nbsp;</td> 
   <td>main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js</td> 
  </tr> 
  <tr> 
   <td>&nbsp;&nbsp;&nbsp;&nbsp;<strong>keywords</strong></td> 
   <td>&nbsp;关键字</td> 
  </tr> 
 </tbody> 
</table>

上述参数是极为常见的参数，另外还可以设置`script`、`license`等等。除了官方必须的一些参数外，我们也可以存储我们自己的关于模块的描述信息在package.json

### 三：生成package.json文件 ###

我们可以使用NPM生成package.json文件，它可以包含最基本的设置以及结果

$ npm init
    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sensible defaults.
    
    See `npm help json` for definitive documentation on these fields
    and exactly what they do.
    
    Use `npm install <pkg> --save` afterwards to install a package and
    save it as a dependency in the package.json file.
    
    Press ^C at any time to quit.
    name: (node_modules) lsm                 # 模块名
    version: (1.0.0) 
    description: Node.js 测试 # 描述
    entry point: (index.js) 
    test command: 
    git repository:   # Github 地址
    keywords: 
    author: 
    license: (ISC) 
    About to write to ……/node_modules/package.json:      # 生成地址
    
    {
      "name": "lsm",
      "version": "1.0.0",
      "description": "Node.js 测试",
      ……
    }
    
    Is this ok? (yes) y

这样就生成了一个最基本的package.json文件，注意手动更改的时候要完全遵循严格的JSON书写格式，否则容易出现意想不到的简单错误。

### 四:版本号概述 ###

npm模块的完整的版本号一般是【**主版本 . 次要版本 . 补丁版本**】，一般情况下，次要版本号发生改变的话，表示程序有重大更新。

（1）使用~表示版本范围

这里大概可以如此概述：① 补丁版本号缺失，则允许补丁版本号升级；② 次要版本号+补丁版本号缺失，则允许次要版本号+补丁版本号升级。

<table> 
 <thead> 
  <tr> 
   <th>标识示例</th> 
   <th>描述</th> 
   <th>版本范围</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>~2.3.4</td> 
   <td>主版本+次要版本+补丁版本</td> 
   <td>2.3.4 &lt;= version &lt; 2.4.0</td> 
   <td>在主版本+次要版本不允许变更的前提下，允许补丁版本升级（补丁板板号下限是4，无上限）。</td> 
  </tr> 
  <tr> 
   <td>~2.3</td> 
   <td>主版本+次要版本</td> 
   <td>2.3.0 &lt;= version &lt; 2.4.0</td> 
   <td>在主版本+次要版本不允许变更的前提下，允许补丁版本升级。</td> 
  </tr> 
  <tr> 
   <td>~2</td> 
   <td>主版本</td> 
   <td>2.0.0 &lt;= version &lt; 3.0.0</td> 
   <td>在主版本不允许变更的前提下，允许次要版本+补丁版本升级。</td> 
  </tr> 
 </tbody> 
</table>

（2）使用^表示版本范围

这里大概可以如此概述：  
① 若主版本号不为0，则允许次要版本号+补丁版本号升级；② 若主版本号为0，次要版本号不为0，则允许补丁版本号升级；③ 若主版本号+次要版本号皆为0，将无法升级模块；④ 若主版本不为0，补丁版本缺失（将被视作0），那么将允许次要版本+补丁版本升级到到最新；⑤ 若主版本为0，补丁版本缺失（将被视作0），那么允许补丁版本升级到最新；⑥ 若次要版本+补丁版本均缺失，此时补丁版本,被视作1，那么将允许次要版本+补丁版本升级到最新。

<table> 
 <thead> 
  <tr> 
   <th>标识示例</th> 
   <th>描述</th> 
   <th>版本范围</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>^1.3.4</td> 
   <td>主版本号不为0</td> 
   <td>1.3.4 &lt;= version &lt; 2.0.0</td> 
   <td>主版本不为0，允许次要版本+补丁版本升级（此例下限是1.3.4，上线是2.0.0但不匹配2.0.0）</td> 
  </tr> 
  <tr> 
   <td>^0.2.3</td> 
   <td>主版本号为0，次要版本号不为0</td> 
   <td>0.2.3 &lt;= version &lt; 0.3.0</td> 
   <td>主版本为0，次要版本不为0，允许补丁版本升级（此例下限是0.2.3，上限是0.3.0但不匹配0.3.0）</td> 
  </tr> 
  <tr> 
   <td>^0.0.3</td> 
   <td>主版本号+次要版本号均为0</td> 
   <td>0.0.3 &lt;= version &lt; 0.0.4</td> 
   <td>主版本号+次要版本号均为0，无法升级模块</td> 
  </tr> 
  <tr> 
   <td>^1.3</td> 
   <td>主版本不为0，补丁版本缺失</td> 
   <td>1.3.0 &lt;= version &lt; 2.0.0</td> 
   <td>主版本不为0，补丁版本因缺失被视作0，允许次要版本+补丁版本升级到到最新（此例下限是1.3.0，上线是2.0.0但不匹配2.0.0）</td> 
  </tr> 
  <tr> 
   <td>^0.2</td> 
   <td>主版本为0，补丁版本缺失</td> 
   <td>0.2.0 &lt;= version &lt; 0.3.0</td> 
   <td>主版本为0，补丁版本因缺失被视作0，允许补丁版本升级到最新（此例下限是0.2.0，上限是0.3.0但不匹配0.3.0）</td> 
  </tr> 
  <tr> 
   <td>^1</td> 
   <td>主版本号不为0，次要版本+补丁版本均缺失</td> 
   <td>1.0.0 &lt;= version &lt; 2.0.0</td> 
   <td>主版本不为0，次要版本+补丁版本因缺失被视作0，允许次要版本+补丁版本升级（此例下限是1.0.0，上线是2.0.0但不匹配2.0.0）</td> 
  </tr> 
  <tr> 
   <td>^0</td> 
   <td>主版本号为0，次要版本+补丁版本均缺失</td> 
   <td>0.0.1 &lt;= version &lt; 1.0.0</td> 
   <td>主版本为0，次要版本因缺失被视作0，补丁版本虽缺失但只能被视作1，允许缺失的次要版本+补丁版本升级到最新（此例下限是0.0.1，上限是1.0.0但不匹配1.0.0）</td> 
  </tr> 
 </tbody> 
</table>

（3）语义版本号

使用NPM下载和发布代码时都会接触到版本号。NPM使用语义版本号来管理代码，这里简单介绍一下。

语义版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号。当代码变更时，版本号按以下原则更新。

> 1.  如果只是修复bug，需要更新Z位。
> 2.  如果是新增了功能，但是向下兼容，需要更新Y位。
> 3.  如果有大变动，向下不兼容，需要更新X位。

版本号有了这个保证后，在申明第三方包依赖时，除了可依赖于一个固定版本号外，还可依赖于某个范围的版本号。例如"argv": "0.0.x"表示依赖于0.0.x系列的最新版argv。