npm与webpack的使用

题目1： 如何全局安装一个 node 应用?

npm install -g xxx 模块会安装在系统目录下, 以后不管在哪个目录都能调用xxx模块

---

题目2： package.json 有什么作用？

package.json 是 CommonJS 规定的用来描述包的文件
一个典型的package.json文件如下:

//package.json
{
  //模块名称,是必需的属性.不能以"_"或"."开头, 不能有大写字母, 应简短而语义化
  "name" : "underscore",  
  //项目的版本号,必需
  "version" : "1.1.6",
  //项目描述 方便别人了解你的模块作用
  "description" : "JavaScript's functional programming helper library.",
  //项目主页地址
  "homepage" : "http://documentcloud.github.com/underscore/",
  //关键词, 方便别人搜索到你的模块
  "keywords" : ["util", "functional", "server", "client", "browser"],
  //作者
  "author" : "Jeremy Ashkenas ",
  //项目的贡献者们
  "contributors" : [],
  //协议
  "license": "ISC",
  //模块所依赖的包
  "dependencies" : [],
  //开发或者测试时，依赖的包。
  "devDependencies" : {
            "my_test_framework": "^3.1.0"
   }
  //代码存放地址
  "repository" : {"type": "git", "url": "git://github.com/documentcloud/underscore.git"},
  //模块的入口文件
  "main" : "underscore.js",
  //指定了运行脚本命令的npm命令行缩写 例:npm run preinstall 就会运行echo here it comes!
  "scripts": {
      "preinstall": "echo here it comes!",
      "postinstall": "echo there it goes!",
      "start": "node index.js",
      "test": "tap test/*.js"
  },
  //指定各个内部命令对应的可执行文件的位置
  "bin": {
      "someTool": "./bin/someTool.js"
  }
  //填写一个bug提交地址或者邮箱
  "bugs" : { 
      "url" : "https://github.com/owner/project/issues"
  }
}

---

题目3： npm install --save app 与 npm install --save-dev app有什么区别?

区别:

• --save 依赖写在package.json中的dependencies
• --save-dev 依赖写在package.json中的devDependencies
• dependencies是项目运行所依赖的包, 使用者在安装项目时会把其中的包一起下载下来
• devDependencies是开发依赖, 开发测试时要用到的模块, npm install并不会下载里面的包

---

题目4： node_modules的查找路径是怎样的?

先在当前./node_module下查找, 没有就往上一级查找, 直到根目录

---

题目5： npm3与 npm2相比有什么改进？yarn和 npm 相比有什么优势? (选做题目)

按照官方文档介绍，npm3处理模块依赖的方式跟npm2很不一样。

• npm2来什么安装什么，根本不理会公共依赖关系，依赖模块一层一层往下存放就是了, 但会造成node_modules太多太深，甚至一不小心就超过windows资源管理器能处理的最长路径长度
• npm3通过将依赖模块扁平化安装以及npm dedupe命令重新计算依赖关系, 并将包结构整理得更合理。避免了冗余又解决了windows上npm包目录太深的问题

Yarn vs npm

• yarn.lock 文件。Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块，Yarn 就会创建（或更新）yarn.lock 这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本。
• 并行安装。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 成功安装之后，才能继续后面的安装。而 Yarn 是同步执行所有任务，提高了性能。
• 更简洁的输出。npm 的输出信息比较冗长。在执行 npm install 的时候，命令行里会不断地打印出所有被安装上的依赖。相比之下，Yarn 简洁太多：默认情况下，结合了 emoji （Windows 上 emoji 不可见）直观且直接地打印出必要的信息，也提供了一些命令供开发者查询额外的安装信息。

---

题目6： webpack是什么？和其他同类型工具比有什么优势？

webpack是德国开发者 Tobias Koppers 开发的模块加载器, 在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等.通过 webpack 的各种加载器，我们可以更高效地管理这些文件。

webpack较之其他类似工具有什么不同:

• 有同步和异步两种不同的加载方式
• Loader,加载器可以将其他资源整合到JS文件中，通过这种方式，可以讲所有的源文件形成一个模块
• 优秀的语法分析能力，支持 CommonJs和AMD 规范
• 有丰富的开源插件库，可以根据自己的需求自定义webpack的配置

---

题目7：npm script是什么？如何使用？

npm 允许在package.json文件里面，使用scripts字段定义脚本命令, 它的每一个属性，对应一段脚本。

{
  //package.json
  "scripts": {
    "build": "node build.js"
  }
}

命令行下使用npm run命令，就可以执行这段脚本。

$ npm run build
# 等同于执行
$ node build.js

npm script有许多优点:

• 项目的相关脚本，可以集中在一个地方。
• 不同项目的脚本命令，只要功能相同，就可以有同样的对外接口。用户不需要知道怎么测试你的项目，只要运行npm run test即可。
• 可以利用 npm 提供的很多辅助功能。

---

题目8： 使用 webpack 替换入门-任务15中模块化使用的 requriejs

代码
预览地址

---

题目9：gulp是什么？使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并

gulp是node.js的一个应用, 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务
代码地址

---