正式学习React(一) 开始学习之前必读
为什么要加这个必读!因为webpack本身是基于node环境的,
里面会涉及很多路径问题,我们可能对paths怎么写!webpack又是怎么找到这些paths的很迷惑。
本文是我已经写完正式学习React(五)后新加的!我觉得很有必要让大家知道!
------------------------------------------------------------------------------------------------------
nodejs require执行流程 ==== webpack的路径查找过程!
-----------------------------------------------------------------------------------------------------
require最常用的方法
require('http') 内置模块
require('./server') “./”表示当前路径,后面跟的是相对路径
require("../lib/server") ../表示上一级目录,后面跟的也是相对路径
server.js
[javascript]
var http = require('http');
function start(){
server = http.createServer(function (req, res) {
res.writeHeader(200, {"Content-Type": "text/plain"});
res.end("Hello oschina\n");
})
server.listen(8000);
console.log("httpd start @8000");
}
exports.start = start;
index.js
[javascript]
//路径根据自己的实际情况而定
var server = require("./learnNode/server");
server.start();
下面介绍require的只是来自于链接:http://www.nodecn.org/modules.html#file_Modules
模块
Node 使用 CommonJS 模块系统。
Node 有一个简单的模块加载系统。在 Node 中,文件和模块一一对应。比如,在 foo.js 加载同一目录中的circle.js 模块。
foo.js 的内容:
var circle = require('./circle.js');
console.log( 'The area of a circle of radius 4 is '
+ circle.area(4));
circle.js 的内容:
var PI = Math.PI;
exports.area = function (r) {
return PI * r * r;
};
exports.circumference = function (r) {
return 2 * PI * r;
};
模块 circle.js 导出了 area() 函数和 circumference() 函数,这样它们就能从模块外部访问了。要导出对象,将其添加到特殊的 exports 对象就行。
模块的局部变量是私有的。在本例中,变量 PI 是 circle.js 私有的。
核心模块
Node 有一些已编译成二进制的模块,这些模块将在本文档的其他地方详细介绍。
核心模块在 Node 源代码的 lib/ 文件夹中定义。
使用 require() 时,核心模块总是优先加载。例如,require('http') 总是返回内置的 HTTP 模块,即使该名称的文件存在。
文件模块
如果没有找到确切的文件,Node 将尝试给所需的文件名添加 .js 后缀再加载,然后再尝试 .node。
.js 文件被视为 JavaScript 文本文件,而 .node 文件被视为已编译的插件模块,用 dlopen 加载。
模块以 '/' 开头表示使用文件的绝对路径。例如,require('/home/marco/foo.js') 将加载/home/marco/foo.js 文件。
模块以 './' 开头表示调用 require() 时使用相对路径。也就是说,为了保证 require('./circle') 能找到,circle.js 必须和 foo.js 在同一目录。
如果不以 '/' 或'./' 开头,该模块可以是一个“核心模块”,也可是一个从 node_modules 文件夹中加载的模块。
从 `node_modules` 文件夹中加载
如果传递给 require() 有模块标识符是不是原生模块,而且不以 '/'、'../' 或'./' 开头,那么 Node 从当前模块的父目录+/node_modules 这个位置尝试加载。
如果还是没有找到,那么它跳到上层目录并依此类推,直到找到模块,或者达到根目录为止。
例如,如果在文件 '/home/ry/projects/foo.js' 中调用 require('bar.js'),那么 Node 将在下列位置查找,顺序如下:
/home/ry/projects/node_modules/bar.js
/home/ry/node_modules/bar.js
/home/node_modules/bar.js
/node_modules/bar.js
这就允许程序将依赖关系本地化,防止它们冲突。
优化 `node_modules` 查找过程
当嵌套依赖关系的层次很深时,这个文件查找列表可能会变得很长。因此,在查找时进行如下优化:
首先,/node_modules 不会附加到一个以 /node_modules 结尾的文件夹后面。
其次,如果调用 require() 的文件已经在一个 node_modules 层级里,那么最顶层的 node_modules 文件夹将被视为搜索树的根。
例如,如果在文件 '/home/ry/projects/foo/node_modules/bar/node_modules/baz/quux.js' 中调用require('asdf.js'),那么 Node 将搜索下列位置:
/home/ry/projects/foo/node_modules/bar/node_modules/baz/node_modules/asdf.js
/home/ry/projects/foo/node_modules/bar/node_modules/asdf.js
/home/ry/projects/foo/node_modules/asdf.js
以文件夹作为模块
Node 允许用户在独立的目录中方便地组织程序,然后提供单一入口指向该库。有三种方式可以将文件夹作为require() 的参数。
第一种方式是在该文件夹中创建 package.json 文件,指定一个 main 模块。一个典型的 package.json 文件可能看起来像这样:
{ "name" : "some-library",
"main" : "./lib/some-library.js" }
如果此文件位于 ./some-library 文件夹,则 require('./some-library') 会尝试加载 ./some-library/lib/some-library.js。
这是 Node 能找到 package.json 文件的情况。
如果在该目录中没有 package.json 文件,那么 Node 将尝试加载该目录中的 index.js 或 index.node 文件。例如,如果上面的例子找不到 package.json,那么 require('./some-library') 将试图加载:
./some-library/index.js
./some-library/index.node
缓存
模块在首次被加载后会缓存起来。这意味着每次调用 require('foo') 将得到完全相同的对象,如果它被解析为同一个文件的话。
总结……
为了得到调用 require() 时被载入的确切的文件名,使用 require.resolve() 函数。
综上所述,这是 require.resolve 的伪码描述:
require(X)
1. If X is a core module,
a. return the core module
b. STOP
2. If X begins with `./` or `/`,
a. LOAD_AS_FILE(Y + X)
b. LOAD_AS_DIRECTORY(Y + X)
3. LOAD_NODE_MODULES(X, dirname(Y))
4. THROW "not found"
LOAD_AS_FILE(X)
1. If X is a file, load X as JavaScript text. STOP
2. If X.js is a file, load X.js as JavaScript text. STOP
3. If X.node is a file, load X.node as binary addon. STOP
LOAD_AS_DIRECTORY(X)
1. If X/package.json is a file,
a. Parse X/package.json, and look for "main" field.
b. let M = X + (json main field)
c. LOAD_AS_FILE(M)
2. LOAD_AS_FILE(X/index)
LOAD_NODE_MODULES(X, START)
1. let DIRS=NODE_MODULES_PATHS(START)
2. for each DIR in DIRS:
a. LOAD_AS_FILE(DIR/X)
b. LOAD_AS_DIRECTORY(DIR/X)
NODE_MODULES_PATHS(START)
1. let PARTS = path split(START)
2. let ROOT = index of first instance of "node_modules" in PARTS, or 0
3. let I = count of PARTS - 1
4. let DIRS = []
5. while I > ROOT,
a. if PARTS[I] = "node_modules" CONTINUE
c. DIR = path join(PARTS[0 .. I] + "node_modules")
b. DIRS = DIRS + DIR
6. return DIRS
从 `require.paths` 加载
在 Node 中,require.paths 是一个字符串数组,表示模块不以 '/' './' 或 '..' 打头的搜索路径。例如,如果 require.paths 设置为:
[ '/home/micheil/.node_modules',
'/usr/local/lib/node_modules' ]
则调用 require('bar/baz.js') 会搜索以下位置:
1: '/home/micheil/.node_modules/bar/baz.js'
2: '/usr/local/lib/node_modules/bar/baz.js'
可以在运行时修改 require.paths 数组来改变这种行为。
它的值最初从 NODE_PATH 环境变量而来,那是一个冒号分隔的绝对路径列表。在前面的例子中,NODE_PATH 环境变量可能被设置为:
/home/micheil/.node_modules:/usr/local/lib/node_modules
只有使用上面的 node_modules 算法找不到模块时才会尝试 require.paths。全局模块的优先级低于捆绑依赖。
**注意** 请不要修改 `require.paths`
出于兼容性的考虑,require.paths 仍然是模块查找过程的首选策略。尽管如此,它可能会在将来的版本中废弃。
虽然它看起来似乎是个好主意,但在实践中一个可变的 require.paths 列表往往是麻烦和混乱的根源。
修改 `require.paths` 毫无用处
这行代码并不会像期望的那样:
require.paths = [ '/usr/lib/node' ];
它的结果就是丢弃了 Node 实际的模块查找路径引用,并创建了一个毫无用处的指向别处的新的引用。
在 `require.paths` 中加入相对路径……不是个好主意
如果你这样做:
require.paths.push('./lib');
它不会添加 ./lib 在文件系统上已解析的完整路径。相反,它实际增加的是 './lib',这意味着如果你在/a/b/x.js 中 require('y.js'),那么它会查找 /a/b/lib/y.js。如果你之后又在 /l/m/n/o/p.js 中require('y.js'),那么它就会查找 /l/m/n/o/lib/y.js。
在实践中,人们往往将它作为捆绑依赖的临时解决办法,这个技巧是不太稳妥的。
零隔离
有一种糟糕的设计:所有模块共用一个 require.paths 数组。
结果,如果一个 Node 程序依赖于这种行为,它可能会永久而微妙地改变同一进程中其它 Node 程序的行为。当应用程序的复杂度增加时,我们倾向于封装功能,这些行为很难预料的部分会成为开发者的恶梦。
增编:软件包管理小贴示
在 Node 中,require() 函数的语义被设计成通用性足以支持大量合理的目录结构。因此 dpkg、rpm 和 npm之类的包管理器可以从 Node 模块构建原生包而不作更改。
下面我们给出一个可以工作的建议的目录结构:
比方说,我们希望 /usr/lib/node/<some-package>/<some-version> 文件夹中包含某个包的特定版本的内容。
一个软件包可以依赖别的包。为了安装 foo 包,你可能需要安装 bar 包的特定版本 。可能该 bar 包本身有依赖关系,在某些情况下,这些依赖关系甚至可能发生冲突或者形成回路。
由于 Node 在加载任何模块时都会查找它的真实路径(即:会解析符号链接),然后在 node_modules 文件夹用上文描述的方式查找依赖。使用以下架构可以很简单地解决:
/usr/lib/node/foo/1.2.3/ -foo 包的内容,版本1.2.3。
/usr/lib/node/bar/4.3.2/ -bar 包的内容,foo 依赖这个包。
/usr/lib/node/foo/1.2.3/node_modules/bar -到 /usr/lib/node/bar/4.3.2/ 的符号链接。
/usr/lib/node/bar/4.3.2/node_modules/* -到 bar 所依赖的包的符号链接。
因此,即使遇到一个回路,或者有依赖冲突,每个模块都能够得到它依赖的可用版本。
当 foo 包中有代码 require('bar') 时,它会得到符号链接至/usr/lib/node/foo/1.2.3/node_modules/bar 的版本。然后,当 bar 包调用 require('quux') 时,它会得到符号链接至 /usr/lib/node/bar/4.3.2/node_modules/quux 的版本。
此外,为了使模块查找过程更加优化,而不是直接把包放到 /usr/lib/node 中,我们可以它们放到/usr/lib/node_modules/<name>/<version> 里。这样,Node 就不用在 /usr/node_modules 或/node_modules 中查找了。
为了使 REPL 能够正常引用模块,可以将 /usr/lib/node_modules 添加至 $NODE_PATH环境变量。因为使用node_modules 文件夹查找模块时的路径都是相对的,而且调用 require() 时基于文件的真实路径,因此软件包本身可以放在任何位置。
正式学习React(一) 开始学习之前必读的更多相关文章
- 正式学习React(五) react-redux源码分析
磨刀不误砍柴工,咱先把react-redux里的工具函数分析一下: 源码点这里 shallowEqual.js export default function shallowEqual(objA, ...
- 正式学习React (七) react-router 源码分析
学习react已经有10来天了,对于react redux react-redux 的使用流程和原理,也已经有一定的了解,在我上一篇的实战项目里,我用到了react-route,其实对它还只是 停留在 ...
- 正式学习 react(三)
有了基础的webpack基础,我们要对react的基本语法进行学习. 我这个教程全部用es6 实现.可能会忽略一些最基本的语法讲解,这些你在官网上或者其他别的地方都比我讲的全. 今天我要讲一下reac ...
- React学习-React初识
一.前言 为什么要去学习React呢,关于前端三大框架Angular,Vue,React其实都得去学吧,因为大家都在用啊,大家都再谈论啊,面试什么的都要求,没办法,曾几何时,大家都说求求大佬们别坑新了 ...
- 为什么学习React Native三点原因
React Native不到两岁,兼容Android平台刚刚1年.我学习React Native其实也就不到1年,不算长,也不算短. Paul Graham在文章中写过:大多数人真正注意到你的时候,不 ...
- React.js深入学习详细解析
今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定 ...
- React基础语法学习
React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...
- 从0开始学习react(一)
本人前端小菜鸡一枚,因为公司要重构网站,打算用用react,毕竟一切为了学习(装B)嘛!!! 在学习react之前,看了许多资料,博客,官方文档之类的,可我这记吃不记打的记性,还是需要在这里记录一下, ...
- [转] 学习React Native必看的几个开源项目
http://www.lcode.org/study-react-native-opensource-one/ http://gold.xitu.io/entry/575f498c128fe10057 ...
随机推荐
- sleep函数——Gevent源码分析
gevent是一个异步I/O框架,当遇到I/O操作的时候,会自动切换任务,从而能异步地完成I/O操作 但是在测试的情况下,可以使用sleep函数来让gevent进行任务切换.示例如下: import ...
- C51编程中对单片机绝对地址访问的两种方法
在进行8051单片机应用系统程序设计时,编程都往往少不了要直接操作系统的各个存储器地址空间.C51程序经过编译之后产生的目标代码具有浮动地址,其绝对地址必须经过BL51连接定位后才能确定.为了能够在C ...
- web api\ protobuf \formatter
9:50:20吴X2014/11/7 9:50:20 9:55:14吴X2014/11/7 9:55:14webapi实现protobuf吴X2014/11/7 9:56:29http://www.s ...
- 使用univocity-parsers创建和读取csv文件
import com.univocity.parsers.csv.CsvFormat;import com.univocity.parsers.csv.CsvParser;import com.uni ...
- 【剑指offer】面试题25:二叉树中和为某一值的路径
题目: 输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径. 思路: dfs一下就可以了.一般dfs肯定递归写比 ...
- ListView开发笔记
一.ListView有背景,ListItem 透明,但是在点击.拖动时变成白色 android:cacheColorHint="#0000"
- 分享几种Linux软件的安装方法
Linux软件安装由于不同的Linux分支,安装方法也互不相同,介绍几种常见的安装方法. 1. 源码安装, 对于本身具有开源血统的Linux系统来说,几乎所有的开源软件都支持在Linux平台运 ...
- svn之——linux下清除svn的用户名和密码
问题:之前用的svn账号权限不够,需要使用别的账号,所以提出需求——怎么使用新的svn账号进行操作 方法一: linux下删除~/.subversion/auth即可清除之前的用户名和密码:rm -r ...
- Unity 2DSprite
Unity官方意识到在4.3版本之前,并没有自带的支持2D游戏工具,商店里面有很多有名2D插件Uni2D,2DToolkit,在4.3版本之后就出现UISprite精灵来支持2D游戏开发,我用这个很多 ...
- 被Oracle全局暂时表坑了
今天凌晨4点多钟,在客户现场的负责人打电话给我,说非常奇怪,下载功能时快时慢.此下载功能非常复杂,之前一直是我优化,在半梦半醒中打开电脑,通过远程看着现场同事在PL/SQL developer中操作. ...