关于npm run dev和build

Question

1.我平时是看了package.json里有dev,就直接npm run dev,运行程序嘛,然后输入url,但没明白npm run build是做什么的?发布这词我没懂..build后发生了什么我也不懂,举个例子:https://github.com/yelingfeng/vuex-tutorial
我安装好依赖后,npm run dev控制台有报错,什么原因我也没找到,然后npm run build,再npm run dev,直接命令行就很多ERR了,请问是为什么?
2.我记得之前看到个教程,首先npm run dev运行程序,端口3000,然后教程说再输入另外一个命令查看服务器端口,就是同时俩个端口都运行了,请问这个命令怎么输入?因为3000已经在运行了,总不能control+c取消再输入吧?

Answer 1

npm run XXX是执行配置在package.json中的脚本，比如：

"scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "unit": "karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
  },

只有这里配置了，你才能run，所以不是所有的项目都能npm run dev/build。要了解这些命令做了什么，就要去scripts中看具体执行的是什么代码。这里就像是一些命令的快捷方式，免去每次都要输入很长的的命令（比如unit那行）。

为什么会出现ERROR，就是因为在跑这些对应的脚本文件的时候，可能是某些依赖没有被加载等的。

一般项目都会有build, dev, unit等，从名字上基本能看出来是干什么的。比如上面配置的unit，就是开启karma去跑单元测试，具体测试内容，要去看karma.conf.js；e2e就是end to end的端到端测试；而test则会将单元测试和端到端测试都执行。

有些项目中根据需要，还会配置其他命令，例如自动生成文档，比如这里：

"build:doc": "node ./scripts/build-doc.js",

如果你去build-doc.js中看的话，会发现，这个脚本在遍历所有源文件，解析注释和其他内容，自动生成API文档

Answer 2

你可以把dev/build理解为键值对的key,实际上run的是在package.json里面配置的value

Answer 3

dev，build没有强制含义，注意理解这里“强制”的意思。

也就是说，我们在通常情况下，约定当你使用dev时，指的是和开发环境相关的事情。

当使用build时，通常就是指和“编译”相关的事

当使用dist时，通常就指和发布相关的事情。

如果对npm run这一些列脚本命令有疑惑，可以看npm-hooks

Answer 4

dev就是你开发环境，配置了hot-loader之类方便调试的工具。
build就是发布也就是生产环境，没有其他多余的东西。
你要注意dev和build所用的webpack配置是不同的。检查配置瞧瞧

Answer 5

哈哈我也遇到这个问题了不过刚解决掉，并了写了篇文章记录这个坑，大家如果还有人掉到了这个坑里欢迎参考我的文章http://www.dabaipm.cn/static/...