高级任务5(npm_npmscript_webpack_node应用)

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

Node模块采用npm install命令安装。

每个模块可以“全局安装”,也可以“本地安装”。“全局安装”指的是将一个模块安装到系统目录中,各个项目都可以调用。一般来说,全局安装只适用于工具模块,比如eslintgulp。“本地安装”指的是将一个模块下载到当前项目的node_modules子目录,然后只有在项目目录之中,才能调用这个模块。

# 本地安装
 npm install <package name>

# 全局安装
 npm install -g <package name>

题目2: package.json 有什么作用?

每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。
npm init用来初始化生成一个新的package.json文件。
下面是一个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":"bug@example.com"},
    "contributors":[{"name":"李四","email":"lisi@example.com"}],
    "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",
    }
}

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

这两条命令都会下载appnode_modules文件夹下面,不同之处在于:
npm install --save app:模块名app将被添加到package.json下的dependencies
npm install --save-dev app:模块名app将被添加到package.json下的devDependencies

此外:dependencies下的模块,是我们生产环境中需要的依赖,devDependencies只用于开发阶段完成集成测试等功能模块依赖。因此,执行npm install server-mock时,只会下载它的dependencies下的模块,而不会下载devDependencies的模块。

如果将node_modules文件夹删掉,则执行npm install默认会安装dependencies字段和devDependencies字段中的所有模块。

执行如下两条命令:
npm install --save easytpl
npm install --save-dev server-mock

通常我们自己写一个模块发布到npm上面时,不需要上传node_modules文件夹下的依赖模块,这是因为这个文件夹很大。用户从npm下载我们的模块时,执行npm install会默认会安装dependencies字段和devDependencies字段中的所有模块。这时我们可以新建一个.gitignore文件,里面写上node_modules,这样当我们把代码上传到github时,便不会上传node_modules文件夹了。

题目4: nodule_modules的查找路径是怎样的?

参考:require() 源码解读
Node 遇到 require(X) 时,按下面的顺序处理。
(1).如果 X是内置模块(比如 require('http'))
a. 返回该模块。
b. 不再继续执行。
(2).如果 X"./"或者 "/" 或者"../"开头
a. 根据 X所在的父模块,确定 X 的绝对路径。
b. 将 X 当成文件,依次查找下面文件,只要其中有一个存在,就返回该文件,不再继续执行。

X
X.js
X.json
X.node

c. 将 X当成目录,依次查找下面文件,只要其中有一个存在,就返回该文件,不再继续执行。

X/package.json(main字段)
X/index.js
X/index.json
X/index.node

(3).如果 X 不带路径
 a. 根据 X 所在的父模块,确定 X 可能的安装目录。
 b. 依次在每个目录中,将 X当成文件名或目录名加载。
(4).抛出 "not found"

举例:
当前脚本文件/home/ry/projects/foo.js执行了 require('bar') ,这属于上面的第三种情况。Node 内部运行过程如下。
首先,确定 x 的绝对路径可能是下面这些位置,依次搜索每一个目录。

/home/ry/projects/node_modules/bar
/home/ry/node_modules/bar
/home/node_modules/bar
/node_modules/bar

搜索时,Node 先将 bar 当成文件名,依次尝试加载下面这些文件,只要有一个成功就返回。

bar
bar.js
bar.json
bar.node

如果都不成功,说明 bar 可能是目录名,于是依次尝试加载下面这些文件。

bar/package.json(main字段)
bar/index.js
bar/index.json
bar/index.node

如果在所有目录中,都无法找到 bar 对应的文件或目录,就抛出一个错误。

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

参考:npm2 npm3 yarn 的故事
npm2存在的问题:
比如一个 App 里模块 AC 都依赖B,无论被依赖的 B 是否是同一个版本,都会生成对应结构:

  • 太深的目录树结构会严重影响效率
  • 在 Windows 下可能会超出系统路径限制的长度

npm3的改进:
针对 npm2 的问题,npm3 加了点算法,直白的解释就是:npm install 时会按照 package.json 里依赖的顺序依次解析,遇到新的包就把它放在第一级目录,后面如果遇到一级目录已经存在的包,会先判断版本,如果版本一样则忽略,否则会按照 npm2 的方式依次挂在依赖包目录下。
比如上面的例子:


在包版本差异化不太严重的情况下,这种构建方式会几乎把所有包放在一级目录下,很大程度上提升了效率以及节省了部分磁盘空间。

npm3也存在开发环境和测试环境的 node_modules 目录结构不一样以及其他的问题,因此FaceBook搞了 yarn 用来替代 npm了。
yarn 构建步骤如下:
Resolution: 向仓库请求依赖关系
Fetching: 看看本地缓存了没有,否则把包拉到缓存里
Linking: 直接全部从缓存里构建好目录树放到 node_modules 里

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

预览
代码
本地开启服务器:


webpack打包:

题目7: 开发一个 node 命令行天气应用用于查询用户当前所在城市的天气,发布到 npm 上去。可以通过如下方式安装使用(可使用api.jirengu.com里提供的查询天气接口) (选做题目)

代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,240评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,328评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,182评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,121评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,135评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,093评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,013评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,854评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,295评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,513评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,398评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,989评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,636评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,657评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2 352

推荐阅读更多精彩内容

  • 1. 如何全局安装一个 node 应用? 每个模块可以“全局安装”,也可以“本地安装”。“全局安装”指的是将一个模...
    进击的前端_风笑影阅读 215评论 0 0
  • 什么是 NPM npm之于Node,就像pip之于Python,gem之于Ruby,composer之于PHP。 ...
    ihoey阅读 6,250评论 2 36
  • npm是什么 NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具...
    build1024阅读 7,876评论 0 9
  • JavaScript 模块化编程 网站越来越复杂,js代码、js文件也越来越多,会遇到什么问题? 命名冲突; 文件...
    magic_pill阅读 1,420评论 0 1
  • 1.如何全局安装一个 node 应用? 每个模块可以“全局安装”,也可以“本地安装”。“全局安装”指的是将一个模块...
    鸿鹄飞天阅读 536评论 0 0