在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
1.我平时是看了package.json里有dev,就直接npm run dev,运行程序嘛,然后输入url,但没明白npm run build是做什么的?发布这词我没懂..build后发生了什么我也不懂,举个例子:我安装好依赖后,npm run dev控制台有报错,什么原因我也没找到,然后npm run build,再npm run dev,直接命令行就很多ERR了,请问是为什么?2.我记得之前看到个教程,首先npm run dev运行程序,端口3000,然后教程说再输入另外一个命令查看服务器端口,就是同时俩个端口都运行了,请问这个命令怎么输入?因为3000已经在运行了,总不能control+c取消再输入吧?
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
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中看的话，会发现，这个脚本在遍历所有源文件，解析注释和其他内容，自动生成
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：posts - 36,&
comments - 5,&
trackbacks - 0
├─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的所有文件
package.json里面
"dev": "node build/dev-server.js",
"build": "node build/build.js",
意思：运行”npm run dev”的时候执行的是build/dev-server.文件，
运行”npm run build”的时候执行的是build/build.js文件。
build文件夹分析
build/dev-server.js
npm run dev 执行的文件build/dev-server.js文件，执行了：
检查node和npm的版本引入相关插件和配置创建express服务器和webpack编译器配置开发中间件（webpack-dev-middleware）和热重载中间件（webpack-hot-middleware）挂载代理服务和中间件配置静态资源启动服务器监听特定端口（8080）自动打开浏览器并打开特定网址（localhost:8080）
说明： express服务器提供静态文件服务，不过它还使用了http-proxy-middleware，一个http请求代理的中间件。前端开发过程中需要使用到后台的API的话，可以通过配置proxyTable来将相应的后台请求代理到专用的API服务器。
build/webpack.base.conf.js
dev-server依赖的webpack配置是webpack.dev.conf.js文件，
测试环境下使用的是webpack.prod.conf.js
webpack.dev.conf.js中又引用了webpack.base.conf.js
webpack.base.conf.js主要完成了下面这些事情：
配置webpack编译入口
配置webpack输出路径和命名规则
配置模块resolve规则
配置不同类型模块的处理规则
这个配置里面只配置了.js、.vue、图片、字体等几类文件的处理规则，如果需要处理其他文件可以在module.rules里面配置。
build/webpack.dev.conf.js
在webpack.base.conf的基础上增加完善了开发环境下面的配置，主要包括下面几件事情：
将hot-reload相关的代码添加到entry chunks合并基础的webpack配置使用styleLoaders配置Source Maps配置webpack插件
build/check-versions.js和build/dev-client.js
最后是build文件夹下面两个比较简单的文件，
dev-client.js似乎没有使用到，代码也比较简单，这里不多讲。
check-version.js完成对node和npm的版本检测
build/utils.js和build/vue-loader.conf.js
webpack配置文件中使用到了utils.js和vue-loader.conf.js这两个文件，utils主要完成下面3件事：
配置静态资源路径生成cssLoaders用于加载.vue文件中的样式生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件
vue-loader.conf则只配置了css加载器以及编译css之后自动添加前缀。
build/build.js
构建环境下的配置，
build.js主要完成下面几件事：
loading动画删除创建目标文件夹webpack编译输出信息
build/webpack.prod.conf.js
构建的时候用到的webpack配置来自webpack.prod.conf.js，该配置同样是在webpack.base.conf基础上的进一步完善。主要完成下面几件事情：
合并基础的webpack配置使用styleLoaders配置webpack的输出配置webpack插件gzip模式下的webpack插件配置webpack-bundle分析说明： webpack插件里面多了丑化压缩代码以及抽离css文件等插件。
config文件夹分析
config/index.js
config文件夹下最主要的文件就是index.js了，
在这里面描述了开发和构建两种环境下的配置，前面的build文件夹下也有不少文件引用了index.js里面的配置。
config/dev.env.js、config/prod.env.js和config/test.env.js
这三个文件就简单设置了环境变量而已，没什么特别的。
这是webpack的基本入门，webpack还有很多插件，还需要去探索
后面写这几个文件的源码解释。
阅读(...) 评论()Node.js 教程
NPM 使用介绍
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功:
如果你安装的是旧版本的 npm，可以很容易得通过 npm 命令来升级，命令如下：
$ sudo npm install npm -g
/usr/local/bin/npm -& /usr/local/lib/node_modules/npm/bin/npm-cli.js
npm@2.14.2 /usr/local/lib/node_modules/npm
如果是 Window 系统使用以下命令即可：
npm install npm -g
使用淘宝镜像的命令：
cnpm install npm -g
使用 npm 命令安装模块
npm 安装 Node.js 模块语法格式如下：
$ npm install &Module Name&
以下实例，我们使用 npm 命令安装常用的 Node.js web框架模块 express:
$ npm install express
安装好之后，express 包就放在了工程目录下的 node_modules 目录中，因此在代码中只需要通过 require('express') 的方式就好，无需指定第三方包路径。
var express = require('express');
全局安装与本地安装
npm 的包安装分为本地安装（local）、全局安装（global）两种，从敲的命令行来看，差别只是有没有-g而已，比如
npm install express
# 本地安装
npm install express -g
# 全局安装
如果出现以下错误：
npm err! Error: connect ECONNREFUSED 127.0.0.1:8087
解决办法为：$ npm config set proxy null
1. 将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。
2. 可以通过 require() 来引入本地安装的包。
1. 将安装包放在 /usr/local 下或者你 node 的安装目录。
2. 可以直接在命令行里使用。
如果你希望具备两者功能，则需要在两个地方安装它或使用 npm link。
接下来我们使用全局方式安装 express
$ npm install express -g
安装过程输出如下内容，第一行输出了模块的版本号及安装位置。
express@4.13.3 node_modules/express
├── escape-html@1.0.2
├── range-parser@1.0.2
├── merge-descriptors@1.0.0
├── array-flatten@1.1.1
├── cookie@0.1.3
├── utils-merge@1.0.0
├── parseurl@1.3.0
├── cookie-signature@1.0.6
├── methods@1.1.1
├── fresh@0.3.0
├── vary@1.0.1
├── path-to-regexp@0.1.7
├── content-type@1.0.1
├── etag@1.7.0
├── serve-static@1.10.0
├── content-disposition@0.5.0
├── depd@1.0.1
├── qs@4.0.0
├── finalhandler@0.4.0 (unpipe@1.0.0)
├── on-finished@2.3.0 (ee-first@1.1.1)
├── proxy-addr@1.0.8 (forwarded@0.1.0, ipaddr.js@1.0.1)
├── debug@2.2.0 (ms@0.7.1)
├── type-is@1.6.8 (media-typer@0.3.0, mime-types@2.1.6)
├── accepts@1.2.12 (negotiator@0.5.3, mime-types@2.1.6)
└── send@0.13.0 (destroy@1.0.3, statuses@1.2.1, ms@0.7.1, mime@1.3.4, http-errors@1.3.1)
查看安装信息
你可以使用以下命令来查看所有全局安装的模块：
$ npm list -g
├─┬ cnpm@4.3.2
│ ├── auto-correct@1.0.0
│ ├── bagpipe@0.3.5
│ ├── colors@1.1.2
│ ├─┬ commander@2.9.0
│ │ └── graceful-readlink@1.0.1
│ ├─┬ cross-spawn@0.2.9
│ │ └── lru-cache@2.7.3
如果要查看某个模块的版本号，可以使用命令如下：
$ npm list grunt
projectName@projectVersion /path/to/project/folder
└── grunt@0.4.1
使用 package.json
package.json 位于模块的目录下，用于定义包的属性。接下来让我们来看下 express 包的 package.json 文件，位于 node_modules/express/package.json 内容：
"name": "express",
"description": "Fast, unopinionated, minimalist web framework",
"version": "4.13.3",
"author": {
"name": "TJ Holowaychuk",
"email": "tj@vision-media.ca"
"contributors": [
"name": "Aaron Heckmann",
"email": "aaron.heckmann+"
"name": "Ciaran Jessup",
"email": ""
"name": "Douglas Christopher Wilson",
"email": ""
"name": "Guillermo Rauch",
"email": ""
"name": "Jonathan Ong",
"email": ""
"name": "Roman Shtylman",
"email": "shtylman+"
"name": "Young Jae Sim",
"email": "hanul@hanul.me"
"license": "MIT",
"repository": {
"type": "git",
"url": "git+/strongloop/express.git"
"homepage": "/",
"keywords": [
"express",
"framework",
"sinatra",
"restful",
"dependencies": {
"accepts": "~1.2.12",
"array-flatten": "1.1.1",
"content-disposition": "0.5.0",
"content-type": "~1.0.1",
"cookie": "0.1.3",
"cookie-signature": "1.0.6",
"debug": "~2.2.0",
"depd": "~1.0.1",
"escape-html": "1.0.2",
"etag": "~1.7.0",
"finalhandler": "0.4.0",
"fresh": "0.3.0",
"merge-descriptors": "1.0.0",
"methods": "~1.1.1",
"on-finished": "~2.3.0",
"parseurl": "~1.3.0",
"path-to-regexp": "0.1.7",
"proxy-addr": "~1.0.8",
"qs": "4.0.0",
"range-parser": "~1.0.2",
"send": "0.13.0",
"serve-static": "~1.10.0",
"type-is": "~1.6.6",
"utils-merge": "1.0.0",
"vary": "~1.0.1"
"devDependencies": {
"after": "0.8.1",
"ejs": "2.3.3",
"istanbul": "0.3.17",
"marked": "0.3.5",
"mocha": "2.2.5",
"should": "7.0.2",
"supertest": "1.0.1",
"body-parser": "~1.13.3",
"connect-redis": "~2.4.1",
"cookie-parser": "~1.3.5",
"cookie-session": "~1.2.0",
"express-session": "~1.11.3",
"jade": "~1.11.0",
"method-override": "~2.3.5",
"morgan": "~1.6.1",
"multiparty": "~4.1.2",
"vhost": "~3.0.1"
"engines": {
"node": "&= 0.10.0"
"files": [
"LICENSE",
"History.md",
"Readme.md",
"index.js",
"scripts": {
"test": "mocha --require test/support/env --reporter spec --bail --check-leaks test/ test/acceptance/",
"test-ci": "istanbul cover node_modules/mocha/bin/_mocha --report lcovonly -- --require test/support/env --reporter spec --check-leaks test/ test/acceptance/",
"test-cov": "istanbul cover node_modules/mocha/bin/_mocha -- --require test/support/env --reporter dot --check-leaks test/ test/acceptance/",
"test-tap": "mocha --require test/support/env --reporter tap --check-leaks test/ test/acceptance/"
"gitHead": "ef7ad681b245fbaf6bcb8e275bbb8e",
"url": "/strongloop/express/issues"
"_id": "express@4.13.3",
"_shasum": "ddb2f1fbd2b032bc80a3",
"_from": "express@*",
"_npmVersion": "1.4.28",
"_npmUser": {
"name": "dougwilson",
"email": ""
"maintainers": [
"name": "tjholowaychuk",
"email": "tj@vision-media.ca"
"name": "jongleberry",
"email": ""
"name": "dougwilson",
"email": ""
"name": "rfeng",
"email": ""
"name": "aredridel",
"email": ""
"name": "strongloop",
"email": ""
"name": "defunctzombie",
"email": ""
"shasum": "ddb2f1fbd2b032bc80a3",
"tarball": "http://registry.npmjs.org/express/-/express-4.13.3.tgz"
"directories": {},
"_resolved": "https://registry.npmjs.org/express/-/express-4.13.3.tgz",
"readme": "ERROR: No README data found!"
Package.json 属性说明
name - 包名。
version - 包的版本号。
description - 包的描述。
homepage - 包的官网 url 。
author - 包的作者姓名。
contributors - 包的其他贡献者姓名。
dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
main - main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
keywords - 关键字
我们可以使用以下命令来卸载 Node.js 模块。
$ npm uninstall express
卸载后，你可以到 /node_modules/ 目录下查看包是否还存在，或者使用以下命令查看：
我们可以使用以下命令更新模块：
$ npm update express
使用以下来搜索模块：
$ npm search express
创建模块，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) runoob
version: (1.0.0)
description: Node.js 测试模块()
entry point: (index.js)
test command: make test
git repository: /runoob/runoob.git
# Github 地址
license: (ISC)
About to write to &&/node_modules/package.json:
# 生成地址
"name": "runoob",
"version": "1.0.0",
"description": "Node.js 测试模块()",
Is this ok? (yes) yes
以上的信息，你需要根据你自己的情况输入。在最后输入 "yes" 后会生成 package.json 文件。
接下来我们可以使用以下命令在 npm 资源库中注册用户（使用邮箱注册）：
$ npm adduser
Username: mcmohd
Email: (this IS public)
接下来我们就用以下命令来发布模块：
$ npm publish
如果你以上的步骤都操作正确，你就可以跟其他模块一样使用 npm 来安装。
使用NPM下载和发布代码时都会接触到版本号。NPM使用语义版本号来管理代码，这里简单介绍一下。
语义版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号。当代码变更时，版本号按以下原则更新。
如果只是修复bug，需要更新Z位。
如果是新增了功能，但是向下兼容，需要更新Y位。
如果有大变动，向下不兼容，需要更新X位。
版本号有了这个保证后，在申明第三方包依赖时，除了可依赖于一个固定版本号外，还可依赖于某个范围的版本号。例如"argv": "0.0.x"表示依赖于0.0.x系列的最新版argv。
NPM支持的所有版本号范围指定方式可以查看。
NPM 常用命令
除了本章介绍的部分外，NPM还提供了很多功能，package.json里也有很多其它有用的字段。
除了可以在查看官方文档外，这里再介绍一些NPM常用命令。
NPM提供了很多命令，例如install和publish，使用npm help可查看所有命令。
NPM提供了很多命令，例如install和publish，使用npm help可查看所有命令。
使用npm help &command&可查看某条命令的详细帮助，例如npm help install。
在package.json所在目录下使用npm install . -g可先在本地安装当前命令行程序，可用于发布前的本地测试。
使用npm update &package&可以把当前目录下node_modules子目录里边的对应模块更新至最新版本。
使用npm update &package& -g可以把全局安装的对应命令行程序更新至最新版。
使用npm cache clear可以清空NPM本地缓存，用于对付使用相同版本号发布新版本代码的人。
使用npm unpublish &package&@&version&可以撤销发布自己发布过的某个版本代码。
使用淘宝 NPM 镜像
大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了：
$ cnpm install [name]
更多信息可以查阅：。
记住登录状态
重复输入密码}