npm-npmscript-gulp-webpack

1. 如何全局安装一个 node 应用?

//packageName是包名
//install 可以用 i 代替
//-g 表示全局安装
npm install -g packageName

---

2. package.json 有什么作用？

命令行 npm init 可以初始化生成一个package.json

package.json 是一个 json 格式的文件，用来记录当前的 npm 包的相关信息，如：

• name：包的名字
• version：版本号
• description：描述
• main：包的入口文件
• script： 运行脚本命令的npm命令行缩写
• author: 作者
• license: 版权信息
• dependencies：项目运行依赖，正式版本中也需要。
• devDependencies：开发依赖，只有开发时候用的依赖包，正式版本中不需要。

例子：

  {
    "name": "packageName", 
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
  },
    "author": "xxx",
    "license": "ISC",
    "dependencies": {},
    "devDependencies": {}
  }

---

3.npm install --save app 与 npm install --save-dev app有什么区别?

npm install --save app
项目运行依赖：安装名为 app 的包，并在 package.json 中添加到 dependencies 项目运行依赖中去，发布以后别人会自动下载 app 依赖

npm install --save-dev app
开发依赖：安装名为 app 的包，并在 package.json 中添加到 devDependencies 开发依赖中去，这个 app 包依赖只有开发者自己使用，发布后别人用不到

---

4.nodule_modules 的查找路径是怎样的?

从文件所在目录下的 nodule_modules 开始，逐级向上查找，直到找到根目录，如果还找不到，就会报错。

查找路径伪代码

/e/饥人谷/senior/s5/webpack2-tutorial/node_modules
/e/饥人谷/senior/s5/node_modules
/e/饥人谷/senior/node_modules
/e/饥人谷/node_modules
/e/node_modules
/node_modules 

---

5. npm3与 npm2相比有什么改进？yarn和 npm 相比有什么优势?

• npm2 把每个依赖的包放在自己的子目录里
  优点：目录结构清楚
  缺点：可能会有重复冗余的依赖包：如下面示意里 a1 ，重复下载了。

  |- a //包
  |- |- a1 //依赖
  |- |- a2 //依赖
  |
  |- b //包
  |- |- a1 //依赖
  |- |- b2 //依赖

• npm3 把每个依赖的包放同级目录下，这样就可以减少包的重复下载

  |— a //包
  |- a1 //依赖
  |- a2 //依赖
  |— b //包
  |- b2 //依赖

• yarn和npm比较
  npm安装不够快，不够稳定；npm安装时运行代码，存在安全问题。
  yarn使用yarn.lock(每当有模块被安装都一定会更新)来保证，不同机子安装程序时的版本一致。
  yarn安装速度比npm快。

---

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

WebPack是模块打包工具：它可以分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其编译转换，给供浏览器使用。找到css, 图片， 字体等资源，进行压缩，混淆等操作后，输出为处理后的资源，并实现依赖加载等操作

Grunt和Gulp的工作方式：

image.png

可以在一个配置文件中配置对某些文件进行类似编译，组合，压缩等任务的具体步骤，然后使用grunt或gulp自动替你完成这些任务

Webpack的工作方式：

image.png

把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，通过各种loaders处理后，最后打包为一个浏览器可识别的JavaScript文件。

对比：
webpack 是以commonJS的形式来书写脚本，对 AMD/CMD 的支持也很全面，方便其它模块也兼容使用
扩展性强，插件机制完善，能被模块化处理的资源多，例JS/CSS/IMG等
开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。

---

7. npm script是什么？如何使用？

npm 允许在package.json文件里面，使用scripts字段定义脚本命令。
上面代码是package.json文件的一个片段，里面的scripts字段是一个对象。它的每一个属性，对应一段脚本。比如，build命令对应的脚本是node build.js。命令行下使用npm run命令，就可以执行这段脚本。

例子：

// package.json
{
  // ...
  "scripts": {
    "upload": "git add .; git commit -m \"modify\"; git push"
  }
}
// commond window
npm run upload

---

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

预览
代码

---

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

Gulp是前端自动化工具，能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说，就是使用Gulp，然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了。

预览
代码