正式学习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 ...
随机推荐
- nginx之依据IP做限制
环境如下: [root@localhost ~]# cat /etc/issueCentOS release 6.5 (Final)Kernel \r on an \m[root@localhost ...
- 动态PDF在线预览
实战动态PDF在线预览及带签名的PDF文件转换 开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是 ...
- Hits per second 下降的几个原因
1.首先看看服务器的资源消耗情况,可能是服务器 处理不了那么多请求, 有很多请求都在等待,此时可以监控一下服务器的资源 看看是不是有很多等待队列 是不是有很多的等待的请求,可用vmstat命令,第一个 ...
- NASM mode for Emacs
NASM mode for Emacs Quick post for those Emacs users out there. The common assembler used on GNU ...
- POJ 2417 Discrete Logging
http://www.cnblogs.com/jianglangcaijin/archive/2013/04/26/3045795.html 给p,a,b求a^n==b%p #include<a ...
- 电子工程师名片——FAT16文件系统
从8月8号开始,连续一个月利用每天下班时间和周末的时间终于初步完成了一个电子工程师的电路板名片,就像U盘一样,不过这个FLASH只有64KB的大小,用的单片机是C8051F320,是一个USB型的单片 ...
- C# Process类_进程_应用程序域与上下文之间的关系
进程(Process)是Windows系统中的一个基本概念,它包含着一个运行程序所需要的资源.进程之间是相对独立的,一个进程无法直接访问另一个进程的数据(除非分布式),一个进程运行的失败也不会影响其他 ...
- 2014.8.4我出的模拟赛【NTR酋长】
NTR酋长 (ntr.pas/.c/.cpp) 黄巨大终于如愿以偿的进入了czy的后宫中……但是czy很生气……他要在黄巨大走到他面前的必经之路上放上几个NTR酋长来阻挡黄巨大. 众所周知,NTR酋长 ...
- IOS 使用dispatch_once 创建单例
+ (instantClass *)sharedClient { static instantClass *_sharedClient = nil; static dispatch_once_t on ...
- Android学习总结——适配器
适配器是AdapterView视图(如ListView - 列表视图控件.Gallery - 缩略图浏览器控件.GridView - 网格控件.Spinner - 下拉列表控件.AutoComplet ...