题目1: 如何全局安装一个 node 应用?
npm install -g xxx
//xxx为包名
如果下载速度比较慢,可以使用淘宝的镜像
//先执行下面命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
//以后安装就用 cnpm 代替 npm
cnpm install -g xxx
install
可以缩写成i
题目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": "cg",
"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 是一款模块加载器兼打包工具,它能把各种资源 JS、CSS、图片等都作为模块来使用和处理。
优势:
- 用 commonJS 来书写,对 AMD/CMD 支持也很全面,
- 方便其他模块也兼容使用,扩展性强,插件机制完善,能被模块化处理的资源多
- 开发便捷,能替代部分 grunt/gulp 的工作,比如打包,压缩。
题目7: npm script 是什么?如何使用
npm script
是 package.json
里的一个属性,可以自定义命令,用 npm run xxx
来执行
(如果 xxx
是 test
、start
,则不用加 run
,因为这是 npm
内置的命令)
{
"name": "npm-demo",
"version": "1.0.0",
"description": "第一个npm demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"mkdir": "mkdir test",
"delete": "rm -r test"
},
"keywords": [
"npm-demo"
],
"author": "cg",
"license": "ISC",
"dependencies": {
"marked": "^0.3.6"
}
}
-
npm test
就能输出里面的echo \"Error: no test specified\" && exit 1
-
npm run mkdir
创建了test
文件夹 -
npm run mkdir
删除了test
文件夹
题目8: 使用 webpack 替换 入门-任务15中模块化使用的 requriejs
重点
webpack.config.js
配置文件
//webpack.config.js
module.exports = {
entry: './app.js',
output: {
path: __dirname,
filename: 'bundle.js'
}
}
app.js
入口文件
var $ = require("jquery")
var goTop = require("./js/com/gotop")
var carousel = require("./js/com/carousel")
var loadMore = require("./js/com/loadmore")
var lazy = require("./js/com/lazy")
var water = require("./js/com/waterfull")
new goTop($("body"))
carousel.init($(".carousel"))
loadMore.init($("#more"), $(".ct"))
lazy.init($(".ct img"))
$(".ct img").on("load", function(){
water.init($(".ct"))
})