exports 和 module.exports 的区别 - CNode技术社区
积分: 1150
无乐子，不 node
require 用来加载代码，而 exports 和 module.exports 则用来导出代码。但很多新手可能会迷惑于 exports 和 module.exports 的区别，为了更好的理解 exports 和 module.exports 的关系，我们先来巩固下 js 的基础。示例：
var a = {name: 1};
console.log(a);
console.log(b);
console.log(a);
console.log(b);
var b = {name: 3};
console.log(a);
console.log(b);
运行 test.js 结果为：
{ name: 1 }
{ name: 1 }
{ name: 2 }
{ name: 2 }
{ name: 2 }
{ name: 3 }
解释：a 是一个对象，b 是对 a 的引用，即 a 和 b 指向同一块内存，所以前两个输出一样。当对 b 作修改时，即 a 和 b 指向同一块内存地址的内容发生了改变，所以 a 也会体现出来，所以第三四个输出一样。当 b 被覆盖时，b 指向了一块新的内存，a 还是指向原来的内存，所以最后两个输出不一样。
明白了上述例子后，我们只需知道三点就知道 exports 和 module.exports 的区别了：
module.exports 初始值为一个空对象 {}
exports 是指向的 module.exports 的引用
require() 返回的是 module.exports 而不是 exports
现在我们来看 Node.js 官方文档的截图:
我们经常看到这样的写法：
exports = module.exports = somethings
上面的代码等价于:
module.exports = somethings
exports = module.exports
原理很简单，即 module.exports 指向新的对象时，exports 断开了与 module.exports 的引用，那么通过 exports = module.exports 让 exports 重新指向 module.exports 即可。
最近也更新这个问题的文章
好文，mark
刚想到这个问题就看到了，真是太巧了～
“也就是说 exports 和 module.exports 不再指向同一块内存，也就是说此时 exports 和 module.exports 毫无联系，也就是说 module.exports 指向的那块内存并没有做任何改变，仍然为一个空对象 {} ，也就是说 area.js 导出了一个空对象，所以我们在 app.js 中调用 area(4) 会报 TypeError: object is not a function 的错误。”
这段话好多 也就是说。。。。
写的非常赞. 要是有图做个说明就最好了.
一开始我没有理解,原因是我没有明白nodejs 是怎么创建module.exports 和 exports,并且二者关系是怎么样的.
系统自动给nodejs 文件增加2个变量 exports 和 module, module 又有一个属性 exports, 这个exports 属性指向一个空对象 {}; 同时 exports这个变量也指向了这个空对象{};
于是就有了 exports =& {} &=module.exports.
这2个exports 其实是没有直接关系的,唯一的关系是: 他们初始都指向同一个空对象{};
如果其中一个不指向做个空对象了, 那么他们的关系就没有了.
懂的人看楼主的解释觉得很多余，不懂的人估计看得会比较迷糊，一个简单的例子：
~function(exports, module){
console.log(exports)
//这里只要进行其它初始化的操作都会导致同样的效果
exports = {}
console.log(exports)
console.log(module.document)
}(window.document, window)
比较基础, 解释的很到位. 顶一个
向各位大神请教个问题,就是关于 区域块刷新的办法, 因为不想使用 res.redirect(’/’); 每次一个请求后(如点击分页)就跳转到首页重新查询所有数据, 觉得这个太浪费资源了
如果组件是一堆属性或方法使用exports就够了，如果组件是一个对象使用module.exports再配合prototype就灵活很多
很简单明了
好文章,顶一下
还再纠结啊，不就是形参引用离开作用域后会还原的问题么。
讲的非常好，更加要感谢的是，作者的github上的n-blog引我进nodejs,##谢谢##
请问下，使用markdown 怎么给代码着色？
我尝试写了一个模块——markdown-css 你可以试试…
前辈你好，
请问你的N-blog在heroku部署时
为什么会出现如下的问题呢
Application Error
An error occurred in the application and your page could not be served. Please try again in a few moments.
If you are the application owner, check your logs for details.
另外，应该不是部署的问题，因为你的另一个开源作品N-chat能够部署成功
“module.exports = somethings 是对 module.exports 进行了覆盖，此时 module.exports 和 exports 的关系断裂，module.exports 指向了新的内存块，而 exports 还是指向原来的内存块”
前面不是说 exports 是指向 module.exports 的引用吗？为什么对 module.exports 赋新值会打断 module.exports 和 exports 的关系？
为啥要写这么多？
非常喜欢nswbmw前辈写的文章，简单明了
感谢解惑，学习了。
你好，想问您个问题，不知道有时间解答否，我现在有三个ejs文件，分别是header.ejs、login.ejs、 header.ejs
在login.ejs中使用&% include header.ejs %&时header.ejs中的CSS样式及JS文件不能正常加载，请问什么情况？
哈哈 我赶觉着看懂你这个简单例子的人不会纠结于exports和module.exports的区别上…
直接告诉他
exports就是module.exports的引用
这样最简单…
exports 是指向的 module.exports 的引用
这1点已经足够说明了它们的关系
楼主解释的不错
写得不错,理解了
很好的文章！
自豪地采用
看到你的例子才会迷糊呢，LZ写的很清晰
谢谢楼主，重新理解了
矮油，不错哦
好顶赞，连我都能看懂
很不错的文章
居然看懂了，谢谢分享哈哈哈。
困扰很久的问题解决了, 32个赞
真好，我要认真的看个几遍！！
理解的不错
分析很到位，支持。
最近也详细整理了一篇,感觉写过之后明白了不少
直接看官方API, 簡單明瞭.
没必要说的这么麻烦吧
无非相当于
exports = module.exports = {}
然后module.exports会在其他模块require的时候返回。
好文，怒赞！
好文章，谢谢，受益匪浅
一直都是用 module.exports, 从来不直接用 exports
好文，学习了~
簡單說exports.XX出來是物件屬性
module.exports 是物件
var obj=require…出來 exports.XX 會存在 obj的屬性裡
var obj=require…出來 module.exports
看了清晰很多，thx
认真看，基础知识解释的很清楚，好文！
好棒，分析的好清楚。
…道理我都懂
我想知道怎么用
这本书讲的非常好，
上面讲了一个比较naive的实现
function require(name) {
if (name in require.cache) {
return require.cache[name];
var code = new Function(“exports, module”, readFile(name));
var exports = {}, module = {exports: exports};
code(exports, module);
require.cache[name] = module.
return module.
require.cache = Object.create(null);
为什么不统一使用module.exports呢？
JS 中对象引用问题～
终于搞懂了，谢谢楼主分享经验
Node模块允许你从被引入文件中选择要暴露给程序的函数和变量。如果模块返回的函数或变量不止一个，那它可以通过设定exports对象的属性来指明它们。但如果模块只返回一个函数或变量，则可以设定module.exports属性。–《Node.js 实战》
又翻出来了…朴大说的很清楚了啊～exports = module. exports = {&K,V&…}; module.exports !=
很好的解释，从原理上了解exports和module.exports的区别
学习了，通俗易懂
学习了，立刻解疑了
*** mark**
马克。。。
深度好文,不懂就多看几遍
我佩服你啊，就这么点发现，你就能扯那么多，哈哈哈
exports指向的对象是module.exports
好文,学习了
3232 &br& &br&来自花见花开 人见人爱的南风~~
cfcccccccccccccccc &br& &br&来自花见花开 人见人爱的南风~~
一看你就是测试的
你也是测试的
活到老学到老，楼主好文章
可以自己跑一下，马上就有一个清晰的了解。
module.exports.name=&123&;
console.info(arguments);
console.info(&-----------------------------&)
console.info(exports);
console.info(&-----------------------------&)
console.info(module);
{ '0': { name: '123' },
{ [Function: require]
resolve: [Function: resolve],
exports: [Object],
parent: null,
filename: 'F:\\WORK\\Nodejs\\OneKey\\routes\\test.js',
loaded: false,
children: [],
paths: [Object] },
extensions: { '.js': [Function], '.json': [Function], '.node': [Function] },
cache: { 'F:\WORK\Nodejs\OneKey\routes\test.js': [Object] } },
exports: { name: '123' },
parent: null,
filename: 'F:\\WORK\\Nodejs\\OneKey\\routes\\test.js',
loaded: false,
children: [],
[ 'F:\\WORK\\Nodejs\\OneKey\\routes\\node_modules', 'F:\\WORK\\Nodejs\\OneKey\\node_modules', 'F:\\WORK\\Nodejs\\node_modules', 'F:\\WORK\\node_modules', 'F:\\node_modules' ] },
'3': 'F:\\WORK\\Nodejs\\OneKey\\routes\\test.js',
'4': 'F:\\WORK\\Nodejs\\OneKey\\routes' }
-----------------------------
{ name: '123' }
-----------------------------
exports: { name: '123' },
parent: null,
filename: 'F:\\WORK\\Nodejs\\OneKey\\routes\\test.js',
loaded: false,
children: [],
[ 'F:\\WORK\\Nodejs\\OneKey\\routes\\node_modules', 'F:\\WORK\\Nodejs\\OneKey\\node_modules', 'F:\\WORK\\Nodejs\\node_modules', 'F:\\WORK\\node_modules', 'F:\\node_modules' ] }
那 exports 又有什么用呢？ module.exports 已经能完成导出的功能了啊
我知道怎么用的就OK了。 整天天搞这些绕口令 真是伤透了脑筋
不错不错，好文章
看到英文解释中有一句说的，当你搞不明白export和module.export的关系的时候，就一直使用module.export好了。看了好几篇文章，大概知道export是module.export的引用，然后export是个局部变量，module是个全局变量。
“原理很简单，即 module.exports 指向新的对象时，exports 断开了与 module.exports 的引用，那么通过 exports = module.exports 让 exports 重新指向 module.exports 即可。”
这一段有点画蛇添足。引用官网的一句 “如果一个新的值被赋值给 exports，它就不再绑定到 module.exports”
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的您要找的是不是:
n. 模块（module的复数）；加载模块列表
['m?d?ulz]
n. [计] 模块（module的复数）；加载模块列表
电源交换模块
第三方模块
芯片规模大小的模组
多蓝牙模块
属于内置模块
更多收起网络短语
- 引用次数：3140
Algorithm of these modules is ant-colony algorithm.
配网规划模块中的算法采用的使蚁群算法。
参考来源 -
&2,447,543篇论文数据，部分数据来源于
If you use the deployer's list-modules command, you will see the deployed org/apache/geronimo/BigPetStore configuration.
如果使用部署程序的 list-modules 命令，您将会看到已部署的 org/apache/geronimo/BigPetStore 配置。
Finally, when the deployment wizard finishes, click Manage Applications and select events-ear / Manage Modules / events-war.
最后，当部署向导完成时，单击 Manage Applications 并选择 events-ear / Manage Modules / events-war。
To list the modules deployed on the server, enter the command deploy/list-modules. Enter the default user name and password, as Figure 19 shows
要列出服务器上部署的模块，可以输入命令 deploy/list-modules。
Another question is if you believe in modules-- if there are modules, what are they?
另一个问题是,如果你相信模块理论,如果模块是存在的,那么它们究竟是什么
or at least one mechanism, I shouldn't say -- the only one-- one mechanism for doing that is going to be to add functions is that it's going to provide both of these things, so the first thing it's going to do is, it's going to let us break up into modules.
我们处理这些的机制--至少一种机制,我不会说只有一种,一种机制是在我们的语言中增加函数,函数的关键是它要提供分解和抽象,所以第一件要做的事，就是将代码分解为模块。
$firstVoiceSent
- 来自原声例句
请问您想要如何调整此模块？
感谢您的反馈，我们会尽快进行适当修改！
请问您想要如何调整此模块？
感谢您的反馈，我们会尽快进行适当修改！博客访问： 740953
博文数量： 405
博客积分： 3010
博客等级： 中校
技术积分： 4333
注册时间：
IT168企业级官微
微信号：IT168qiye
系统架构师大会
微信号：SACC2013
分类： LINUX 10:22:56
modules 的字面意思就是模块，在此指的是 kernel modules；简单来说， 一个模块提供
了一个功能，如 isofs、minix、nfs、lp 等等Modules的概念及使用 15:18 pm作者：作者来自：Linux知识宝库现载：地址：无名一、什么是 modules？
modules 的字面意思就是模块，在此指的是 kernel modules；简单来说， 一个模块提供
了一个功能，如 isofs、minix、nfs、lp 等等。传统来讲，模块化有两个方法解决： 设计者
可以把各项功能分离到单独的叫做线程的处理中去， 或者是将内核以包含/排除一些功能的方
式重新编译。如果把功能分离到线程中去，那么内核就叫做“微内核”(micro-kernel)，这种解
决方法增加了线程间协调工作的通信开销。就象名字暗示的那样，这种解决方案的优点在于内
核的大小。
linux的解决方案是包含内核模块，这些模块是可以按需要随时装入和卸下的。 这样做可
以使得内核的大小和通信量都达到最小。将模块从内核中独立出来，不必预先『绑』在
kernel codes 中。这样做有三种优点： 第一， 将来修改 kernel 时，不必全部重新compile，
可节省不少时间；第二， 若需要安装新的 modules ，不必重新 compile kernel，只要插入
(通过insmode指令) 对应的 modules 即可；第三，减少内核对系统资源的占用， 内核可以集
中精力做最基本的事情，把一些扩展功能都交由modules实现。
模块也可以用来尝试新的内核代码而不需要每次都创建和重激活内核。但是，这样做带来
的问题是：使用内核模块通常会轻微的增加性能和内存开支。一个可加载模块肯定会产生更多
的代码，这种代码和额外的数据结构会占用更多一点的内存。另外因为间接访问内核资源也让
模块的效率轻微降低。
模块化的思想已经被广泛接受，主要的原因在于它可以扩展系统的功能，用户可以灵活的
配置系统。Apache也采取了这种功能扩展方式，在本文中主要讨论是内核的模块安装与卸载，
Apache模块的安装请参照Apapce的相关文档。
二、如何加载模块？
加载内核模块的方法有两种。第一种使用insmod命令手工把它插入到内核。另一个更智能
的方法是在需要的时候加载这个模块︰这叫做按需加载（demand loading）。当内核发现需要
一个模块的时候，例如当用户安装一个不在内核的文件系统的时候，内核会请求内核守护进程
（kerneld）试图加载合适的模块。说到这里就不能不提到内核守护进程kerneld了，它非常的
聪明，能够主动的把您需要的modules 自动插入 kernel， 将没用到的 module 从kernel中清
退。Kerneld由两个独立的部分构成：一部分工作于linux的内核，负责向daemon发送请求；另
一部分工作于系统的用户数据区，负责调入由内核请求指定的modules。若少了这个kerneld，
就只能通过手工的方式,用insmode或modeprobe命令进行加载。
三、modules的相关命令介绍
与modules有关的命令有：
: 列出已经被内核调入的模块
insmod : 将某个module插入到内核中
：将某个module从内核中卸载
depmod : 生成依赖文件，告诉将来的 insmod 要从哪儿调入 modules。这个依赖文件就在
/lib/modules/[您的kernel版本]/modules.dep。
Kerneld：负责自动的将模块调入内核和把模块从内核中卸载。
四、编译一个最小的linux内核
模块一般用来支持那些不经常使用的功能。例如，通常情况下你仅使用拨号网络，因此网
络功能并不是任何时候都需要的，那么就应该使用可装入的模块来提供这个功能。仅在你进行
拨号联接的时候，该模块才被装入。而在你断掉连接的时候它会被自动卸下。这样会使内核使
用内存的量最小，减小系统的负荷。
当然，那些象硬盘访问这样时时刻刻都需要的功能，则必须作在内核里。如果你搭一台网
络工作站或web服务器，那么网络功能是时刻都需要的， 你就应该考虑把网络功能编译到内核
里。另外一个方法是在启动的时候就装入网络模块。这种方法的优点是你不需要重新编译内核。
而缺点是网络功能不能特别高效。
按照以上的原则，我们首先列出一张清单，看看 kernel 中哪些选项是非有不可的，也就
是说，这些东西是必须被编译到内核中的。将那些非必需的模块剔除到内核以外。
第一个是root所在的硬盘配置。哪果您的硬盘是IDE接口，就把 ide 的选项标记下来。如
果是SCSI接口，请把您的接口参数及 SCSI id 记标下来。
第二个是选择使用哪一个文件系统。linux的默认文件系统是是 ext2 ， 那么就一定要把
它标记下来。如果机器中还其它的操作系统，如win98或windows NT，您还会可能选择FAT32或
NTFS的支持，不过后面你可以通过手工加载的方式来加入新的模块支持。
第三个是选择linux所支持的可执行文件格式。这里有两种格式可供选择：
elf：这是当前linux普遍支持的可执行文件格式，必须编译到内核中 。
a.out： 这是旧版的linux的可执行文件各函数库的格式， 如果你确认肯定用不到这种格
式的可执行文件，那么就可以不把它编译到内核当中。
以上这些内容，是必须要编译到内核中的。其它的内容凡是所有选项中m提示的，都选择m，
这样可以通过手工的方式添加该模块。
** Loadable module support*Enable loadable module support (CONFIG_MODULES) [Y/n/?]Set version
information on all symbols for modules (CONFIG_MODVERSIONS) [N/y/?]Kernel daemon support (e.g.
autoload of modules) (CONFIG_KERNELD) [Y/n/?]
分别回答 Y,N,Y 。其中 CONFIG_KERNELD 的 default 值是 N， 所以要注意选择Y。
make config 完后，仍旧是 make clean。
接下来要 make zlilo 或 make zImage。
然后 make modules_install 。完成之后， 就编译出一个没有调入多余
模块的一个“干净的”内核映像文件了。
五、如何手工加载Modules？
如果要以手工的方式加载模块, 建议最好使用 modprobe,
因为它可以解决模块之间的依
赖性问题，以声卡的部分来说，以sound blaster 为例其总共有以下模块：
sb 33652 0 (autoclean)
uart401 6160 0 (autoclean) [sb]
sound 56492 0 (autoclean) [sb uart401]
soundcore 2372 5 (autoclean) [sb sound]
这些模块都要加载上来，整个声卡才能工作，而且它们之间是有依赖性关系的。最核心的
soundcore必须首先装入, 最后装入sb。但一般人是不知道其先后顺序的。因此， modprobe
就是用来解决这个问题用的。
通常我们只要
modprobe sb
它就会自动的找出 sb 用到的所有的模块, 将它们一一的加载进来，故一般使用者就不用
去伤脑筋了。
那么内核是怎么知道这些模块间的依赖性关系的呢？原来，在系统启动脚本里有一条
'depmod -a'命令，会给系统中的所有可用的模块创建一个依赖关系的列表。而
'modprobe module-name'会使用这个列表，在装入指定的
模块前先装入那些事先装入的模块。如果在这个从属列表中找不到'module-name'的话，
它会给出相应的出错信息。
但若使用 insmod, 它可不会自动完成其它模块的调入。比如说，我们要加入PPP模块，用这个命令：
root/root>insmod ppp
root/root>
如果操作成功，系统出现操作提示符。如果没有成功，可能出现下列信息：
/lib/modules/2.2.10/net/ppp.o: unresolved symbol slhc_init_Rsmp_1ca65fca
/lib/modules/2.2.10/net/ppp.o: unresolved symbol slhc_compress_Rsmp_cfd3a418
/lib/modules/2.2.10/net/ppp.o: unresolved symbol slhc_free_Rsmp_b99033d9
/lib/modules/2.2.10/net/ppp.o: unresolved symbol slhc_toss_Rsmp_a152cec0
/lib/modules/2.2.10/net/ppp.o: unresolved symbol slhc_remember_Rsmp_
/lib/modules/2.2.10/net/ppp.o: unresolved symbol slhc_uncompress_Rsmp_3bb36b01
[root /root]#
这说明，PPP模块没有加载成功，错误提示中的unresolved symbol说明， PPP模块所需要
的一些模块还没有载入。错误提示第一行的内容是：slhc_init_Rsmp_1ca65fca ，这是哪个模
块？这其中可能需要一些经验来做判断，它是以slhc开头的，就试试slhc吧。
root/root>insmod slhc 一切正常，然后我们再加载PPP模块
root/root>insmod ppp
root/root>
这回没有什么返回信息，说明PPP模块加载成功了。
六、从内存中卸载一个Modules.
要卸载一个模块，首先用lsmod看看该模块是否确实已经加载上来，然后再做操作。 除此
之外，在碰到有依赖关系的模块时，从内核中卸载模块的过程与载入的过程恰好相反，它遵循
“first in last out“的准则，即在一系列有依赖关系的模块中， 必须先卸载最后加载进来的
模块，最后卸载最先加载进来的模块。比如：如果要用 rmmod 移除正在使用中的模块(如上例，
要卸载slhc, 但仍有PPP模块在使用它)会出现错误提示：Device or resource busy 。所以，
在将PPP模块从内存中卸载后，才可能将slhc模块从内存中卸载。
总之，在卸载模块时，对于可能出现的模块间依赖性问题，linux会给你提示足够的信息，
仔细查看这些信息，是能够为你采取相应的操作并最终解决问题提供帮助的。
阅读(543) | 评论(0) | 转发(0) |
给主人留下些什么吧！~~
请登录后评论。CSS Modules 用法教程 - 简书
CSS Modules 用法教程
作者：阮一峰
原文地址：
学过网页开发就会知道，CSS 不能算编程语言，只是网页样式的一种描述方法。
为了让 CSS 也能适用软件工程方法，程序员想了各种办法，让它变得像一门编程语言。从最早的Less、SASS，到后来的 PostCSS，再到最近的 CSS in JS，都是为了解决这个问题。
本文介绍的
有所不同。它不是将 CSS 改造成编程语言，而是功能很单纯，只加入了局部作用域和模块依赖，这恰恰是网页组件最急需的功能。
因此，CSS Modules 很容易学，因为它的规则少，同时又非常有用，可以保证某个组件的样式，不会影响到其他组件。
零、示例库
我为这个教程写了一个，包含六个Demo。通过它们，你可以轻松学会CSS Modules。
首先，克隆示例库。
$ git clone https://github.com/ruanyf/css-modules-demos.git
然后，安装依赖。
$ cd css-modules-demos
$ npm install
接着，就可以运行第一个示例了。
$ npm run demo01
打开浏览器，访问http://localhost:8080，查看结果。其他示例的运行方法类似。
一、局部作用域
CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。
产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名。这就是 CSS Modules 的做法。
下面是一个React组件。
import React from 'react';
import style from './App.css';
export default () =& {
&h1 className={style.title}&
Hello World
上面代码中，我们将样式文件输入到style对象，然后引用style.title代表一个class。
构建工具会将类名style.title编译成一个哈希字符串。
&h1 class="_3zyde4l1yATCOkgn-DBWEL"&
Hello World
App.css也会同时被编译。
._3zyde4l1yATCOkgn-DBWEL {
这样一来，这个类名就变成独一无二了，只对App组件有效。
CSS Modules 提供各种，支持不同的构建工具。本文使用的是 Webpack 的插件，因为它对 CSS Modules 的支持最好，而且很容易使用。顺便说一下，如果你想学 Webpack，可以阅读我的教程。
下面是这个示例的。
module.exports = {
entry: __dirname + '/index.js',
publicPath: '/',
filename: './bundle.js'
loaders: [
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
presets: ['es2015', 'stage-0', 'react']
test: /\.css$/,
loader: "style-loader!css-loader?modules"
上面代码中，关键的一行是style-loader!css-loader?modules，它在css-loader后面加了一个查询参数modules，表示打开 CSS Modules 功能。
现在，运行这个Demo。
$ npm run demo01
打开http://localhost:8080 ，可以看到，h1标题显示为红色。
二、全局作用域
CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串。
加入一个全局class。
:global(.title) {
使用普通的class的写法，就会引用全局class。
import React from 'react';
import styles from './App.css';
export default () =& {
&h1 className="title"&
Hello World
运行这个示例。
$ npm run demo02
打开 http://localhost:8080，应该会h1标题显示为绿色。
CSS Modules 还提供一种显式的局部作用域语法:local(.className)，等同于.className，所以上面的App.css也可以写成下面这样。
:local(.title) {
:global(.title) {
三、定制哈希类名
css-loader默认的哈希算法是[hash:base64]，这会将.title编译成._3zyde4l1yATCOkgn-DBWEL这样的字符串。
里面可以定制哈希字符串的格式。
loaders: [
test: /\.css$/,
loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"
运行这个示例。
$ npm run demo03
你会.title被编译成了demo03-components-App---title---GpMto。
四、 Class 的组合
在 CSS Modules 中，一个选择器可以继承另一个选择器的规则，这称为"组合"（）。
在中，让.title继承.className 。
.className {
background-color:
composes: classN
不用修改。
import React from 'react';
import style from './App.css';
export default () =& {
&h1 className={style.title}&
Hello World
运行这个示例。
$ npm run demo04
打开http://localhost:8080，会红色的h1在蓝色的背景上。
App.css编译成下面的代码。
._2DHwuiHWMnKTOYG45T0x34 {
._10B-buq6_BEOTOl9urIjf8 {
background-color:
相应地，h1的class也会编译成&h1 class="_2DHwuiHWMnKTOYG45T0x34 _10B-buq6_BEOTOl9urIjf8"&。
五、输入其他模块
选择器也可以继承其他CSS文件里面的规则。
.className {
background-color:
可以继承another.css里面的规则。
composes: className from './another.css';
运行这个示例。
$ npm run demo05
打开http://localhost:8080，会蓝色的背景上有一个红色的h1。
六、输入变量
CSS Modules 支持使用变量，不过需要安装 PostCSS 和 。
$ npm install --save postcss-loader postcss-modules-values
把postcss-loader加入。
var values = require('postcss-modules-values');
module.exports = {
entry: __dirname + '/index.js',
publicPath: '/',
filename: './bundle.js'
loaders: [
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
presets: ['es2015', 'stage-0', 'react']
test: /\.css$/,
loader: "style-loader!css-loader?modules!postcss-loader"
postcss: [
接着，在里面定义变量。
@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;
可以引用这些变量。
@value colors: "./colors.css";
@value blue, red,
background-color:
运行这个示例。
$ npm run demo06
打开http://localhost:8080，会蓝色的背景上有一个红色的h1。
编程学习分享者，专注前端。
微博与微信：【IT程序狮】
无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅，特此分享以备自己日后查看，也希望更多的人看到这篇好的文章：http://www.jianshu.com/p/42e11515c10f 写在前面的话阅读本文之前，先看下面这个webpack的配置文件，如果每...
从V1迁移到V2由于使用的是webpack版本是2.2.1，所以针对原文做了一些修改。针对webpack2的修改部分和添加的部分在最底部，文中已经改过来了。 写在前面的话阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限...
GitChat技术杂谈 前言 本文较长，为了节省你的阅读时间，在文前列写作思路如下： 什么是 webpack，它要解决的是什么问题？ 对webpack的主要配置项进行分析，虽然不会涉及太多细节，但是期待在本节能让我们知晓如果我们有什么需求，我们该从哪些配置项着手修改？ 分析...
学习流程 参考文档:入门Webpack，看这篇就够了Webpack for React 一. 简单使用webpack打包node模块并且调用步骤 安装好node.js和全局的npm 新建文件夹webpack, 打开cmd转到此处 转到E盘: E: 转到路径: cd Work...
日更新，添加了clean-webpack-plugin,babel-env-preset,添加本文涉及到的所有代码的示例，如果你在学习过程中出错了，可点击此处参考 写在前面的话 阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能...
昨天是一年一度的感恩节，在西方，感恩节之于人们就像春节之于国人，是合家团聚的节日，人们齐聚一堂，享用火鸡大餐。同时，也会邀请好友、单身汉或远离家乡的人共度佳节。近年来，受西方文化影响，中国人也会在感恩节这一天举办各种活动，除了商场折扣活动之外，最常见的就是约上好友胡吃海塞，...
尽管生活有很多的不如意，但是确实有很多可取之处，法院的工作繁忙但没到那种累死人的程度，工资还不错，地位好，离家近。这三点中的任何一个其实都有足以让我留下来的理由，所谓命运，大概都是最适合自己的那条道路，法庭的人很好，是我自己的问题。刚开始可能不太容易融入进去，但是我是个慢热...
好的习惯从微小的地方开始，比如一天做一个俯卧撑，一天写30个字。慢慢做下去，坚持做，时间长了就会形成习惯，最终会带来改变！
我不得不承认干浄整洁的生活的确给我带来了许多幸运，比如：我现在的房间，刚开始租下这间房子以后，只有一个一次性的衣柜，两个桌子，桌腿是砖头搭起来的，沙发是肮乱的。
现在通过一步步整理，房间贴上了墙纸，衣柜换全新的了，电脑桌，厨柜都换了好的，虽然是在二手市场淘的，但我很喜...
文/尘间红叶 临近春节，老家同学微信群里，开始讨论起回家过年同学聚会的话题。我总是悄悄地看着，不发一言。 有要好的同学问我:你什么时候回来？我注视着手机屏幕，手指轻轻抚摸着那短短一行几个字，久久不能回答，一次次问自己:什么时候回去? 他说，你还是小时候一样好强的性子。走了，...
