关于项目中package.json文件分析_bootstrap4项目packages.json-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44901846/article/details/107342648

package.json文件分析

简介
作用
内容
一个package.json文件内容

简介

有使用框架开发过项目的小伙伴都知道，每个项目中都含有一个叫package.json的文件，那么是否你究竟对它了解有多少呢？
本文我会讲解一些我对它的个人理解。

作用

package.json文件是npm init命令初始化后，在项目的根目录下自动生成的配置文件，它定义了这个项目的配置信息以及所需要的各种模块。

有这个文件之后，运行npm install命令，会自动下载项目所需的所有依赖模块，这些依赖会加载到更目录的node_modules（这就是为什么每次执行npm install后会多出这个文件），有了这些模块项目才能正常运作起来。

内容

现在已经对文件作用了解了，那么文件中的具体内容是什么样的呢？

从整体上看，它就是一个js对象，里面为多个属性。

最常见的属性：

name(必须)：字段包含您的软件包的名称，并且必须为小写字母和一个单词，并且可以包含连字符和下划线。

version(必须)：字段的格式必须是：x.x.x，(通常是1.0.0)符合语义版本控制准则。

author：作者字段，它描述软件包的作者信息。它的格式为：authorName <authorEmail> (webMessage)，其中后两个信息可以省略。

scripts：它是一个对象，包含多个属性，且每个属性和npm命令相对应，如我们常常使用npm start(npm run start，start为特殊命令，可省略run)来启动一个项目，那么这个start其实就是一个scripts属性，其中start对应的值为项目cli对应的执行命令。
如：

"scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
}

dependencies：是一个对象，配置模块依赖的模块列表，key是模块名称，value是版本范围。该模块中所列举的插件属于生产环境的依赖（程序正常运行需要加载的依赖）
如：

"dependencies": {
    "axios": "^0.19.1",
    "bootstrap": "^4.4.1",
    "core-js": "^3.4.3",
    "crypto-js": "^4.0.0"
}

devDependencies：是一个对象，配置模块依赖的模块列表，key是模块名称，value是版本范围。该模块中所列举的插件属于开发环境的依赖（比如：测试或者文档框架等）。
如：

"devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.1",
    "@vue/cli-plugin-eslint": "^4.1.1",
    "@vue/cli-plugin-router": "^4.2.2"
}

一个大型的项目中会有很多这样的依赖，不同项目需要有不同的解释方式，这里只举例一些常见的，当然，想要了解更多，可以访问npmjs。

一个package.json文件内容

{
    "name": "sales-app",
    "version": "1.0.0",
    "license": "MIT",
    "scripts": {
        "start": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "axios": "^0.19.1",
        "bootstrap": "^4.4.1",
        "core-js": "^3.4.3",
        "crypto-js": "^4.0.0",
        "js-sha256": "^0.9.0",
        "jsencrypt": "^3.0.0-rc.1",
        "json-bigint": "^0.3.0",
        "mobile-detect": "^1.4.4",
        "sa-sdk-javascript": "^1.15.4",
        "vant": "^2.5.6",
        "vue": "^2.6.10",
        "vue-amap": "^0.5.10",
        "vue-axios": "^2.1.5",
        "vue-baidu-map": "^0.21.22",
        "vue-cookies": "^1.7.0",
        "vue-html5plus": "^1.0.0",
        "vue-router": "^3.0.5",
        "vuex": "^3.1.2",
        "vuex-router-sync": "^5.0.0"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^4.1.1",
        "@vue/cli-plugin-eslint": "^4.1.1",
        "@vue/cli-plugin-router": "^4.2.2",
        "@vue/cli-plugin-vuex": "^4.2.2",
        "@vue/cli-service": "^4.1.1",
        "babel-eslint": "^10.0.3",
        "babel-plugin-import": "^1.13.0",
        "eslint": "^4.19.1",
        "eslint-plugin-vue": "^6.0.1",
        "less": "^3.8.1",
        "less-loader": "^5.0.0",
        "vue-template-compiler": "^2.6.10"
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": true
        },
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
        ],
        "rules": {
            "no-console": "off"
        },
        "globals": {
            "API_INVOKE_URL": true,
            "APP_INTRANET_URL": true,
            "AES_FLAG": true,
            "AMap": false
        },
        "parserOptions": {
            "parser": "babel-eslint"
        }
    },
    "postcss": {
        "plugins": {
            "autoprefixer": {}
        }
    },
    "browserslist": [
        "Android >= 4.0",
        "iOS >= 7"
    ],
    "main": "babel.config.js",
    "keywords": [],
    "author": "",
    "description": ""
}