blog
blog copied to clipboard
yongheng2016
npm-npmscript-gulp-webpack
题目1： 如何全局安装一个 node 应用?
npm install -g xxx
题目2： package.json 有什么作用？
一般每个项目根目录下都有一个package.json文件，用来定义本项目的配置信息、需要加载的模块
npm init //初始化，设置package.json文件
{
"name": "Hello World",
"version": "0.0.1",
"author": "张三",
"description": "第一个node.js程序",
"keywords":["node.js","javascript"],
"repository": {
"type": "git",
"url": "https://path/to/url"
},
"license":"MIT",
"engines": {"node": "0.10.x"},
"bugs":{"url":"http://path/to/bug","email":"[email protected]"},
"contributors":[{"name":"李四","email":"[email protected]"}],
"scripts": {
"start": "node index.js"
},
"dependencies": {
"express": "latest",
"mongoose": "~3.8.3",
"handlebars-runtime": "~1.0.12",
"express3-handlebars": "~0.5.0",
"MD5": "~1.2.0"
},
"devDependencies": {
"bower": "~1.2.8",
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-jshint": "~0.7.2",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-clean": "~0.5.0",
"browserify": "2.36.1",
"grunt-browserify": "~1.3.0",
}
}
scripts指定运行脚本命令的npm命令行缩写，如：
"scripts": {
"preinstall": "echo here it comes!",
"postinstall": "echo there it goes!",
"start": "node index.js",
"test": "tap test/*.js"
}
-
dependencies指定项目生产环境下所依赖的模块 -
devDependencies指定项目开发环境下所依赖的模块 -
main指定了加载的入口文件，默认是根目录下的index.js -
config用于添加命令行的环境变量
参考：http://javascript.ruanyifeng.com/nodejs/packagejson.html
题目3： npm install --save app 与 npm install --save-dev app有什么区别?
-
npm install --save app简写：-S//大写 生产环境下的依赖，即产品上线后仍要使用的依赖 -
npm install --save-dev app简写：-D//大写 开发环境下的依赖，即开发环境下的辅助工具，产品上线后不用
题目4： node_modules的查找路径是怎样的?
- 如果传递给require()的参数不是核心模块，也没有以
./，../，/开头，则Node.js会从当前模块的父目录开始，尝试在它的/node_modules文件夹里加载相应模块 - 如果没有找到，那么就再向上一级目录移动，直到文件系统的根目录为止。
- 如：在
'/home/ry/projects/foo.js'文件里调用了require('bar.js')，查找顺序为：
/home/ry/projects/node_modules/bar.js
/home/ry/node_modules/bar.js
/home/node_modules/bar.js
/node_modules/bar.js
参考：
- http://www.ruanyifeng.com/blog/2015/05/require.html
- https://amery2010.gitbooks.io/nodejs-api-doc-cn/modules/loading_from_node_modules_folders.html
题目5： npm3与 npm2相比有什么改进？yarn和 npm 相比有什么优势? (选做题目)
- npm2存在问题：
- 由于npm在设计时考虑到同一个依赖包的不同版本这种错综复杂关系，所以npm2版本采用的安装方式是填充结构目录
暴露问题：太深的目录树结构会严重影响效率，甚至在 Windows 下可能会超出系统路径限制的长度（复制粘贴删除就会报错）
- npm3针对旧版本的解决方式
- 会按照 package.json 里依赖的顺序依次解析，遇到新的包就把它放在第一级目录，后面如果遇到一级目录已经存在的包，会先判断版本，如果版本一样则忽略，否则会按照 npm2 的方式依次挂在依赖包目录下
更新包时，依然会产生结构冗余的问题，可通过
dedupe整理包结构
npm dedupe
- yarn 的优势
- Resolution: 向仓库请求依赖关系
- Fetching: 看看本地缓存了没有，否则把包拉到缓存里
- Linking: 直接全部从缓存里构建好目录树放到 node_modules 里
参考：
- https://int64ago.org/2016/10/15/npm2-npm3-yarn-%E7%9A%84%E6%95%85%E4%BA%8B/
- http://www.alloyteam.com/2016/03/master-npm/
- https://docs.npmjs.com/how-npm-works/npm3
题目6： webpack是什么？和其他同类型工具比有什么优势？
webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。
- 优势：代码的拆分与异步加载、对非 JavaScript 资源的支持等。强大的loader 设计使得它更像是一个构建平台，而不只是一个打包工具。
- 模块规范：
- 同时支持多种模块规范（AMD | CommonJS | UMD）
- 通过使用loader，webpack也可以支持ES6 module(webpack2 原生支持)
- 通过特定的插件实现 shim 后，在webpack 中，甚至可以把以最传统全局变量形式暴露的库当作模块require 进来。
- 非javascript模块支持
- 图片、.
text、.css...
- 图片、.
- 构建产物
- 不用类似Requirejs那样依赖AMD模块加载器（如Requirejs自身）
- 模块规范：
- webpack 特色
- 代码拆分（code splitting）
- 智能的静态分析
- 模块热替换（Hot Module Replacement）
参考：http://www.techug.com/post/webpack-requirejs-browserify.html
题目7：npm script是什么？如何使用？
npm 允许在package.json文件里面，使用scripts字段定义脚本命令。这些定义在package.json里面的脚本，就称为 npm 脚本
- 用法： package.json文件中，通过定义scripts对象中的键值对来创建脚本内容
{
// ...
"scripts": {
"build": "node build.js"
}
}
- note:
- 由于执行npm 脚本时，会创建一个shell,且将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。
- 这意味着，当前目录的node_modules/.bin子目录里面的所有脚本，都可以直接用脚本名调用，而不必加上路径
- 假如当前项目依赖里有
Mocha,脚本内容直接写Mocha test就可以了 直接写模块名称
"test": "mocha test"
不用写成路径形式
"test": "./node_modules/.bin/mocha test"
参考：http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
