• 五、package.json的介绍


    package.json是一个json格式的NPM配置文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。

    npm install命令根据这个配置文件,自动下载所需的模块,将package.json中的模块安装到node_modules文件夹下,也就是配置项目所需的运行和开发环境。

    {
      "name": "vueclidemo", //1、项目名称
      "version": "0.1.0", //2、版本号
      "private": true, //3、是否私有项目
      "scripts": { //4、执行脚本。用npm执行。
        "serve【这个名字是可以改变的】": "vue-cli-service serve", //执行npm run serve 运行开发环境
        "build": "vue-cli-service build", //执行npm run build 运行发布版本
        "lint": "vue-cli-service lint" //执行npm run lint 运行ESLint
      },
      "dependencies": {//5、(生产环境下)配置项依赖模块列表【该环境下的依赖包代码会打包到dist->js->chunk-vendors.56acd13b.js文件中】
        "core-js": "^3.6.5",
        "vue": "^2.6.11"
      },
      "devDependencies": {//6、(开发环境下)配置项依赖模块列表【该环境下的依赖包代码不会打包到dist中】
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",
        "vue-template-compiler": "^2.6.11"
      },
      "eslintConfig": {//7、(JavaScript)代码检测工具配置项
        "root": true,
        "env": {
          "node": true
        },
        "extends": [
          "plugin:vue/essential",
          "eslint:recommended"
        ],
        "parserOptions": {
          "parser": "babel-eslint"
        },
        "rules": {}
      },
      "browserslist": [//8、自动添加CSS3兼容性扩展,比如-webkit-
        "> 1%",
        "last 2 versions",
        "not dead"
      ]
    }

    一般在打包自己的项目给别人或者在上传自己项目的时候,要把node_modules文件夹删除。

    可以通过以下命令,把被删除的依赖包node_modules重新下载回来。

    npm install

    可以在任意代码位置,添加以下代码块,即可禁止/开启eslint代码检测工具。

    /*eslint-disable*/
    /*eslint-enable*/
  • 相关阅读:
    sass和less的对比
    vue 源码分析
    vue的全家桶
    Vue组件化和路由
    开发技术文档汇总
    NodeJs前端构建工具 ——————之Grunt篇
    grunt使用小记之uglify:最全的uglify使用DEMO
    20 种提升网页速度的技巧
    webfont应用系列(二)如何制作图标字体?
    快速上手制作Icon Font
  • 原文地址:https://www.cnblogs.com/Strugglinggirl/p/15354558.html
Copyright © 2020-2023  润新知