美文网首页
高级任务5(npm_npmscript_webpack_node

高级任务5(npm_npmscript_webpack_node

作者: 饥人谷_小敏 | 来源:发表于2017-02-24 18:39 被阅读179次

题目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里提供的查询天气接口) (选做题目)

代码

相关文章

  • 高级任务5(npm_npmscript_webpack_node

    题目1: 如何全局安装一个 node 应用? Node模块采用npm install命令安装。 每个模块可以“全局...

  • 高级-任务5

    题目1: 如何全局安装一个 node 应用? npm install -g 题目2: package.json 有...

  • 高级 - 任务5

    课程任务 题目1: 如何全局安装一个 node 应用? 在命令行使用npm install -g xxx即可以全局...

  • RAC_5.高级用法

    5.高级用法 5.1 rac_liftSelector 它的作用是,当我们在并行执行多个任务的时候,需要等所有任务...

  • 高级-任务2

    this 相关问题 问题1: apply、call 、bind有什么作用,什么区别 apply和call的第一个参...

  • 高级-任务4

    题目1: 为什么要使用模块化? 模块的由来:嵌入网页的JS代码越来越庞大,越来越像桌面程序,需要一个团队去分工协作...

  • 高级-任务3

    封装一个轮播组件 封装一个曝光加载组件 封装一个 Tab 组件 封装一个 Modal 组件

  • 高级-任务1

    问题1: OOP 指什么?有哪些特性 OOP: Object Oriented programming面向对象编程...

  • 20171023 周一 今日计划+回顾反思

    一、今日计划 学习任务:高级数据库 - Assignment 5 二、今日回顾 三、系统维护 早餐:30m午饭:1...

  • 高级任务2

    1、apply、call 、bind有什么作用,什么区别? apply语法--->fun.apply(thisAr...

网友评论

      本文标题:高级任务5(npm_npmscript_webpack_node

      本文链接:https://www.haomeiwen.com/subject/whiywttx.html