npm install和npm run dev以及npm run build的区别

最新推荐文章于 2024-08-24 22:08:58 发布

ZeroMaster

最新推荐文章于 2024-08-24 22:08:58 发布

阅读量2.4w

点赞数 17

分类专栏： vue vue.js 文章标签： npm dev

本文链接：https://blog.csdn.net/wszhm123/article/details/103292485

版权

vue 同时被 2 个专栏收录

3 篇文章 2 订阅

订阅专栏

vue.js

2 篇文章 0 订阅

订阅专栏

我们在开发vue.js的mvvp项目时候，会执行npm install ,npm build,npm dev等等。其实这些都和package.json有关。

{
    "name": "mfw-ui",
    "version": "1.0.0",
    "description": "My Framework ui",
    "author": "hongming.zhao <1183483051@qq.com>",
    "private": true,
    "scripts": {
        "dev": "node build/dev-server.js",
        "test": "node build/test.js",
        "build": "node build/build.js"
    },
    "dependencies": {
        "@antv/g2": "^3.5.8-beta.1",
        "ajv": "^6.2.1",
        "ajv-keywords": "^3.1.0",
        "async-validator": "^1.8.2",
        "autoprefixer": "^8.1.0",
        "axios": "^0.18.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.4",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-polyfill": "^6.26.0",
        "babel-preset-env": "^1.6.1",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-stage-2": "^6.24.1",
        "babel-register": "^6.26.0",
        "chalk": "^2.3.2",
        "clipboard": "^2.0.1",
        "connect-history-api-fallback": "^1.5.0",
        "copy-webpack-plugin": "^4.5.1",
        "css-loader": "^0.28.10",
        "echarts": "^4.2.1",
        "element-ui": "^2.11.1",
        "eventsource-polyfill": "^0.9.6",
        "express": "^4.16.3",
        "extract-text-webpack-plugin": "^3.0.2",
        "file-loader": "^1.1.11",
        "file-saver": "^1.3.3",
        "friendly-errors-webpack-plugin": "^1.6.1",
        "function-bind": "^1.1.1",
        "handsontable": "^0.37.0",
        "html-webpack-plugin": "^3.0.6",
        "http-response-object": "^3.0.1",
        "js-cookie": "^2.2.0",
        "js-md5": "^0.7.3",
        "moment": "^2.21.0",
        "node-sass": "^4.8.2",
        "opn": "^5.2.0",
        "optimize-css-assets-webpack-plugin": "^3.2.0",
        "ora": "^2.0.0",
        "prettier": "^1.12.1",
        "sass-loader": "^6.0.7",
        "script-loader": "^0.7.2",
        "semver": "^5.5.0",
        "shelljs": "^0.8.1",
        "sync-request": "^6.0.0",
        "then-request": "^6.0.0",
        "tinymce": "^5.0.14",
        "url-loader": "^1.0.1",
        "vue": "^2.5.16",
        "vue-axios": "^2.0.2",
        "vue-baidu-map": "^0.21.22",
        "vue-clock2": "^1.1.5",
        "vue-core-image-upload": "^2.4.5",
        "vue-count-to": "^1.0.13",
        "vue-i18n": "^7.6.0",
        "vue-loader": "^14.2.1",
        "vue-moment": "^3.2.0",
        "vue-router": "^3.0.1",
        "vue-style-loader": "^4.0.2",
        "vue-template-compiler": "^2.5.16",
        "vuex": "^3.0.1",
        "webpack": "^3.11.0",
        "webpack-merge": "^4.1.2",
        "xlsx": "^0.12.5"
    },
    "devDependencies": {
        "http-proxy-middleware": "^0.18.0",
        "webpack-bundle-analyzer": "^2.11.1",
        "webpack-dev-middleware": "^2.0.6",
        "webpack-hot-middleware": "^2.21.2"
    },
    "engines": {
        "node": ">= 6.0.0",
        "npm": ">= 5.0.0"
    }
}

对package.json的说明：

name - 包名.
    version - 包的版本号。
    description - 包的描述。
    homepage - 包的官网URL。
    author - 包的作者，它的值是你在https://npmjs.org网站的有效账户名，遵循“账户名<邮件>”的规则，例如：zhangsan <zhangsan@163.com>。
    contributors - 包的其他贡献者。
    dependencies / devDependencies - 生产/开发环境依赖包列表。它们将会被安装在 node_module 目录下。
    repository - 包代码的Repo信息，包括type和URL，type可以是git或svn，URL则是包的Repo地址。
    main - main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
    keywords - 关键字

当我们执行npm install其实就是执行dependencies的过程，生成一个node-moudel的文件夹，里面放置的是对应引入的插件。

当我们执行npm build和npm dev其实都是执行的scripte里面的内容

package.json里面

"dev": "node build/dev-server.js",

"build": "node build/build.js",

意思：运行”npm run dev”的时候执行的是build/dev-server.js文件，

运行”npm run build”的时候执行的是build/build.js文件。

├─build
│   ├─build.js
│   ├─check-versions.js
│   ├─dev-client.js
│   ├─dev-server.js
│   ├─utils.js
│   ├─vue-loader.conf.js
│   ├─webpack.base.conf.js
│   ├─webpack.dev.conf.js
│   ├─webpack.prod.conf.js
│   └─webpack.test.conf.js
├─config
│   ├─dev.env.js
│   ├─index.js
│   ├─prod.env.js
│   └─test.env.js
├─...
└─package.json
以上是关于bulid与run的所有文件