前端的争端越来越多，就像如今这个创业当职原创内容，盗版必究。【版权所有，侵权必究】业的社会一样，一个工具出来，还没有成熟，【原创不易，请尊重版权】【作者：唐霜】它的替代品就已经抢占风头，比如grunt【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。和gulp，比如npm和yarn，各个公转载请注明出处：www.tangshuang.net【本文受版权保护】司都有自己的风格，发布自己的工具，吸取前未经授权，禁止复制转载。【版权所有，侵权必究】人的成果，实现自己的抱负。前端包管理器也【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net是争端不断，虽然npm大有一统天下的趋势原创内容，盗版必究。【本文首发于唐霜的博客】，但是非常明显，npm的模式非常容易复制未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net，yarn只需要做更多的宣传推广工作，完【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】全就可以取代它。实际上，作为开发者，往往【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。希望一个稳定的工具，同时又可以在它基础上本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】不断发展，用自己想用，避自己想避。
【版权所有】唐霜 www.tangshu原创内容，盗版必究。【原创内容，转载请注明出处】ang.net原创内容，盗版必究。前端包管理器的主要目的，是为了解决包依赖【原创内容，转载请注明出处】未经授权，禁止复制转载。问题。这里面涉及一些概念，一个一个阐述。
【版权所有】唐霜 www.tangshu【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netang.net著作权归作者所有，禁止商业用途转载。包管理器及其江湖
所谓包管理器，就是一个可以对开发者发布的【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。包进行管理的工具而已，评判这个工具的好坏【作者：唐霜】【未经授权禁止转载】，应该是以这个工具能否解决对应的管理问题本文作者：唐霜，转载请注明出处。【转载请注明来源】，而非网上很多人讨论的社区、托管平台等一本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】系列附加问题。
【本文受版权保护】本文版权归作者所有，未经授权不得转载。目前比较流行的有npm, bower, 【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。component等，我看了下知乎，国内原创内容，盗版必究。【本文首发于唐霜的博客】还可推荐有spm3，其他的管理器知名度不本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。大，或许还处于公司内部自己好用的层面。f【版权所有，侵权必究】【本文首发于唐霜的博客】acebook的东西给我感觉总是带着公司【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。内部需求的设计，比如react nati【本文受版权保护】【原创内容，转载请注明出处】ve和yarn，感觉都是它公司内的产品需【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。求衍生的项目，结果后来没有上线产品，或者【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】自己玩着觉得爽，就发布出来。但是不管怎么未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net样，我的理念是：有更多的选择总是好事，物要各尽其能。这一点上我喜欢gulp插件建议里面写的【原创内容，转载请注明出处】【未经授权禁止转载】，说“一个插件只做一件事，不要做别人已经本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】做过的重复的事，或者不要做几件事，拆分开【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。就可以了”。一个东西完成一件事，不一定需【未经授权禁止转载】原创内容，盗版必究。要天天更新版本，能在关键位置物尽其能就好【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。。
著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】所以我不希望看到npm一统天下的局面，不【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】过从现在前端的发展来看，一统天下几乎是不【作者：唐霜】转载请注明出处：www.tangshuang.net可能的，没有哪家公司只用某一个公司的产品【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。或者把命根寄托在一个东西上。npm和bo【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】wer我接触的比较多，所以就发表一下对他本文作者：唐霜，转载请注明出处。【作者：唐霜】们的看法。
未经授权，禁止复制转载。转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netng.net【版权所有】唐霜 www.tangshu原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netang.net【作者：唐霜】npm最令我欣喜的功能，是它的scrip【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.nett功能，相反，它的树状依赖结构我并不喜欢本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。，虽然它这样可以很好的解决依赖版本问题。【版权所有，侵权必究】转载请注明出处：www.tangshuang.net对于一个项目而言，同时依赖多个版本，意味转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。着要把这几个版本都打包进去，这就可能会产【原创内容，转载请注明出处】【版权所有，侵权必究】生冲突，比如大家都挂了一个属性在wind本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netow上。但是npm实际更多的是承担nod未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。e的模块管理，而非前端包管理。在node【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。的代码里，require的时候路径不一样【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。，引用的模块也不一样，而且每一次requ【原创内容，转载请注明出处】【原创不易，请尊重版权】ire的时候，都会去执行，并不是说你前面著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】require了，后面require同一【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net个东西就直接读内存里上次require的【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net，所以当某个包依赖一个低版本的包时，并不【未经授权禁止转载】【本文受版权保护】影响其他依赖相同包但版本更高的情况。可是原创内容，盗版必究。【原创不易，请尊重版权】运行在浏览器端的情况完全不同，jquer本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】y多个版本一起运行时，后面的方法会把前面【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】的覆盖掉，window上绑定的东西，会在著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net第二次jquery加载时替换掉。所以这个【转载请注明来源】【本文首发于唐霜的博客】版本不可能像node那样树状结构。
【本文受版权保护】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。而bower则是基于这种思想，即你依赖的【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】包，必须选出一个来用，如果库里面有多个版【本文受版权保护】【本文首发于唐霜的博客】本，你依赖的包里也有不同包依赖不同版本的本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。情况，那么bower甚至会强制你选择其中本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】一个版本来用。这种情况下，如果高版本的包未经授权，禁止复制转载。未经授权，禁止复制转载。对低版本不具备兼容性，那么那个依赖低版本未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net的包，就会出现问题。一旦出现这种问题，作【本文受版权保护】【原创内容，转载请注明出处】为开发者是没有办法解决的，除非去改bow【版权所有，侵权必究】【版权所有，侵权必究】er包的源码，让包依赖高版本。当然，不会【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。有人去这样做。
【版权所有，侵权必究】转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【作者：唐霜】ng.net【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。包≠组件
我要推的，是组件的概念。我们传统意义的前未经授权，禁止复制转载。【本文受版权保护】端是在浏览器端滚动的关注html, cs【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.nets, js的开发，而现在的前端，其实最终原创内容，盗版必究。【作者：唐霜】也是要回到浏览器，只不过开发模式已经更新【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。了一个世纪。趴在桌子上盯着屏幕一个像素一本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】个像素的调样式的前端还在努力，这部分人并转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net没有减少，传统的写好html、css、j【作者：唐霜】【关注微信公众号：wwwtangshuangnet】s的工作模式仍然在很多公司流行。即使在这【作者：唐霜】【原创内容，转载请注明出处】个层面的前端工作里，也有非常多新奇的想法【未经授权禁止转载】【本文首发于唐霜的博客】，比如前后端分离，模块化等等，他们并没有本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。构建工具，但仍然不亦乐乎。但是，当前端程【原创不易，请尊重版权】未经授权，禁止复制转载。序员开始使用构建工具的时候，前端猿类就开【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。始向前端人类进化，使用工具让现在的前端跟【本文首发于唐霜的博客】未经授权，禁止复制转载。以前的前端工作模式完全不同，现在讨论包管未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。理器、构建工具远超出单点技术的探讨。
【作者：唐霜】转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【本文受版权保护】ng.net本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。而组件，就是在构建工具出现之后被迫提升的【本文受版权保护】【转载请注明来源】。在以前的前端开发中，我们听到更多的是“【本文受版权保护】【转载请注明来源】插件”，一个好的插件，就像一个非常好的黑【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net箱，有良好可控的接口，实现漂亮的功能。使【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】用npm和bower的起初，会误以为这中未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】东西，无非是把插件统一管理起来，可以一下未经授权，禁止复制转载。原创内容，盗版必究。子下载到自己本地使用，这样的想法不止我一【原创内容，转载请注明出处】未经授权，禁止复制转载。个人有过。
【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。ang.net本文作者：唐霜，转载请注明出处。包并不一定是黑箱，它还有可能是锤子，是工本文作者：唐霜，转载请注明出处。【未经授权禁止转载】具，比如underscore，你说它是插【本文受版权保护】本文版权归作者所有，未经授权不得转载。件，可是它没有非常明确的要实现什么功能，【作者：唐霜】【本文受版权保护】特别是在浏览器界面效果上，啥功能？类似的【原创不易，请尊重版权】原创内容，盗版必究。很多包，它们更多的是提供算法，或优化服务【版权所有】唐霜 www.tangshuang.net【本文受版权保护】。所以npm对应的是package.js【作者：唐霜】【本文首发于唐霜的博客】on，它可以管理包，而这些包，更多的是为【版权所有，侵权必究】【作者：唐霜】node提供特定的功能，别人写好的功能，【未经授权禁止转载】【原创不易，请尊重版权】你直接require进来，就可以用，很爽未经授权，禁止复制转载。【本文首发于唐霜的博客】。
【未经授权禁止转载】【转载请注明来源】【原创内容，转载请注明出处】【未经授权禁止转载】不过在浏览器端还有一种情况，就是它仅实现【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】某些效果的特定部分，比如渐隐渐现，你也可本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】以把它做成一个插件，用的时候调用接口。但【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。是，如果你使用构建工具来build代码，原创内容，盗版必究。未经授权，禁止复制转载。你很难说这个插件什么时候用，要不要包含在【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。你最终的代码里面。就举个简单的例子，你可【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net以说slider是一个插件，但是slid转载请注明出处：www.tangshuang.net【本文受版权保护】er里面有一个功能是touch slid【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】e，我只需要这个功能在我的代码里，是否可【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net以把这部分代码独立出来，你slider也【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net可以用，我自己的代码里面也可以用？这个功未经授权，禁止复制转载。【作者：唐霜】能就是一个独立的未被构建的包，就是我所说【本文首发于唐霜的博客】【本文首发于唐霜的博客】的组件。
【作者：唐霜】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】组件的特征有两点：1. 没有被构建，也就未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net是说肯定会被别人require进去，别人【本文受版权保护】【作者：唐霜】在build时候才用你；2. 功能独立，本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。模块小，复用和扩展都很方便。
原创内容，盗版必究。转载请注明出处：www.tangshua原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netng.net著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】ang.net在构建之前它叫组件，构建好之后，它就在你【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。的产品里消失了。就拿上面那个touch 原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。slide的组件来说，在你做好自己的插件原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net之前，它是独立存在的，被你require著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net进来，但是当你build完自己的插件发布【原创不易，请尊重版权】【作者：唐霜】之后，你根本不需要告诉别人touch s【版权所有，侵权必究】转载请注明出处：www.tangshuang.netlide是什么，而只需要告诉别人怎么用你【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。的插件。
【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】【未经授权禁止转载】ang.net本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【本文首发于唐霜的博客】npm的包天生是用来被require的，转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】但是这些包大部分是运行在node环境里面【本文受版权保护】原创内容，盗版必究。，不需要构建过程，所以实际上也只是包，谈【转载请注明来源】转载请注明出处：www.tangshuang.net不上组件。而bower则是实实在在的组件【作者：唐霜】原创内容，盗版必究。，bower的specs里面说，bower.json is used f本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】or configuring packa原创内容，盗版必究。【本文受版权保护】ges that can be used本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】 as a dependency of 【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netanother package，它们是用来build的时候的用的。所以本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。包括bootstrap在内的一些遵守这个【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】规则的bower component都是【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。为别人构建做准备的。而像很多人想的那样，【转载请注明来源】未经授权，禁止复制转载。把dist目录下的build好的文件当做【转载请注明来源】原创内容，盗版必究。bower component的入口，其【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。实是不对的。不过bower并未强行规定，【转载请注明来源】【转载请注明来源】这种误解导致bower饱受诟病。假如np未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。m将来顶替bower在component原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net上走上述老路的话，势必也会遇到相同的问题【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】。
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。et 获取更多精彩内容】【未经授权禁止转载】【未经授权禁止转载】构建
由于这种误解把component的概念暴本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。露的太过，以至于有些人试图回避compo【版权所有，侵权必究】【本文受版权保护】nent，直接将它隐含在构建过程中。前端原创内容，盗版必究。【原创内容，转载请注明出处】大神TJ是componentjs的作者，转载请注明出处：www.tangshuang.net【转载请注明来源】componentjs的想法，是将com【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。ponent的管理，使用和构建统一于一体原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。。你可以使用componentjs像bo【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】wer一样从componentjs自己的【未经授权禁止转载】本文作者：唐霜，转载请注明出处。库下载组件备用，还可以在开发完后自己做b著作权归作者所有，禁止商业用途转载。【本文受版权保护】uild。但随着webpack等工具的火【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】热，componentjs停止维护了。维【原创内容，转载请注明出处】原创内容，盗版必究。护者们发现webpack超级好，完全顶替著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。了componentjs的很大一部分，所【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。以就放弃了继续开发。
【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。ang.net【转载请注明来源】【访问 www.tangshuang.n【原创不易，请尊重版权】原创内容，盗版必究。et 获取更多精彩内容】【原创内容，转载请注明出处】这里的componentjs和webpa【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】ck就是构建工具，componentjs【原创内容，转载请注明出处】【版权所有，侵权必究】不能说是纯粹的构建工具，因为它最初其实是本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。以包管理器的身份亮相的。
【本文受版权保护】【访问 www.tangshuang.n【关注微信公众号：wwwtangshuangnet】【转载请注明来源】et 获取更多精彩内容】构建工具，也就是做build的工具，将你【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。按照模块化组织好的代码，通过构建之后，得本文版权归作者所有，未经授权不得转载。【作者：唐霜】到非模块化的单一成品。这个成品可以是任何本文版权归作者所有，未经授权不得转载。【转载请注明来源】形式，比如是一个库或一个插件，也可以是一【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。个新的组件。
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。构建是现代化前端的必要过程，也得益于此，本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】html, css, js再次被大整个，本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】这并不是倒退，在开发过程中，他们还是分开【未经授权禁止转载】转载请注明出处：www.tangshuang.net的，只不过在最终的结果中，它们表现为杂糅【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】在一起。特别是angular, reac著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。t这样的库，它们上来就要求js和html【原创不易，请尊重版权】【本文首发于唐霜的博客】的杂糅。
转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【转载请注明来源】ng.net【关注微信公众号：wwwtangshua未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。ngnet】【未经授权禁止转载】【作者：唐霜】接下来要讨论的，是component和构【未经授权禁止转载】本文作者：唐霜，转载请注明出处。建的关系。在构建中，任何一个被引入进来的【原创内容，转载请注明出处】【原创内容，转载请注明出处】包，都应该被称为组件，因为在最终的结果中【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。，你并不需要将使用了哪些组件暴露出来。构著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】建出来一个插件就是一个插件，构建出来一个【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。应用就是一个应用。
【本文受版权保护】【版权所有，侵权必究】【作者：唐霜】构建工具超级杂乱，几乎所有的公司都有自己【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。的构建工具，webpack只是其中最优秀著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。的一只。之所以这么乱，是因为构建没有规范【版权所有，侵权必究】【未经授权禁止转载】，大家都在讨论哪个build工具，打包工【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。具好用，却并不打算推行构建工具遵循的原则【作者：唐霜】未经授权，禁止复制转载。。而webpack也更愿意把自己定位为一【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】个工具，而非规范的构建者，这也会导致后来转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】必定有新工具代替它。但若它建立了一套规范【未经授权禁止转载】【未经授权禁止转载】，那么后来者只会完善它，而不会想再造轮子本文版权归作者所有，未经授权不得转载。【本文受版权保护】。也正因没有大家公认的规范，一旦一个工具【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。退隐，所有以往通过该工具构建的应用，就不【本文首发于唐霜的博客】【版权所有，侵权必究】能不面临升级问题，因为按照该工具的规则进【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。行构建而写的代码，在后来新用的工具中不兼转载请注明出处：www.tangshuang.net【版权所有，侵权必究】容。比如之前用component构建，现【本文受版权保护】著作权归作者所有，禁止商业用途转载。在用webpack就得想办法使之兼容。
【未经授权禁止转载】【本文受版权保护】本文作者：唐霜，转载请注明出处。构建工具有简单也有复杂，复杂如webpa【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。ck，简单如babel，babel一个命著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。令把你之前用es6写的代码转换为es5，著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】但不会打乱原来的代码组织结构。用grun【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。t gulp之类的流程管理工具配合一些插转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】件，也可以生产出自己的构建工具，比如gu转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】lp-uglify gulp-sass 未经授权，禁止复制转载。【原创不易，请尊重版权】gulp-cssmin等插件，都是为我们【未经授权禁止转载】原创内容，盗版必究。构建服务的。正是这种便捷性，我也开发了自【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。己的构建工具componer，而本文就是在写componer的过程中转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】思考而写的。
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。以组件为包的构建原则
在npm和bower的体系里，大家把重点转载请注明出处：www.tangshuang.net【转载请注明来源】争论放在谁解决依赖性问题更好一点，都说b本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。ower过时了，这些论断都是从一些侧面去著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。说的，比如bower都没人维护了，说明它本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】过时了，或者说看到bower和npm上都著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。可以下载类似jQuery这样的库，感觉也本文作者：唐霜，转载请注明出处。原创内容，盗版必究。就是个插件托管器，没啥特别。这些说法都没【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】有抓住实质，bower的包目录名是bow转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。er_components，npm的包目本文版权归作者所有，未经授权不得转载。【本文受版权保护】录名是node_modules，这其实已【作者：唐霜】【原创内容，转载请注明出处】经非常说明问题了。component和m【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。odule在一些方面是有些重合的，但是显转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。然，module并不需要用来build，【转载请注明来源】转载请注明出处：www.tangshuang.net而component这个词本身就意味着应本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】该用来build。
【转载请注明来源】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】还有一个问题，就是为什么要有包管理器，如【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。果仅仅是个托管服务或者插件下载器，那确实【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。没啥用，但是它要解决依赖问题。非常哲学的转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net思考是，为什么它要解决依赖问题？因为它要本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net为build做准备，只有在考虑build转载请注明出处：www.tangshuang.net【未经授权禁止转载】的时候才需要解决依赖问题，不build，【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】不需要思考这个问题。在bower和npm【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】之间，npm其实是一种回避式的解决问题方本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】式，因为npm是树状结构的依赖关系，也就转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。是说同一个组件可以在目录里有很多很多份，本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】主要看它的主版本是不是内部模块依赖的。但【本文受版权保护】本文版权归作者所有，未经授权不得转载。是bower就不同，它要求你自己决定使用【版权所有】唐霜 www.tangshuang.net【本文受版权保护】哪一个版本，这种管理是主动出击式的，但是【原创不易，请尊重版权】未经授权，禁止复制转载。问题就是对于开发者而已，又更加麻烦了，而本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】且有的时候这个依赖问题本来就不好解决。所【本文受版权保护】著作权归作者所有，禁止商业用途转载。以就目前而言，npm确实比bower更加著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】优越的解决了依赖问题。但是同样的，有优势转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。就会有代价，代价就是在做build的时候【版权所有】唐霜 www.tangshuang.net【本文受版权保护】，相同代码可能会被使用多次，导致最终结果【未经授权禁止转载】原创内容，盗版必究。的代码冗余。
【访问 www.tangshuang.n【本文受版权保护】【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】未经授权，禁止复制转载。未经授权，禁止复制转载。解决这个问题，其实应该回到组件本身。以j【未经授权禁止转载】本文作者：唐霜，转载请注明出处。Query为例，jQuery一次性将自己【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。所有模块都放在自己的源码里，开发者一旦依【未经授权禁止转载】【原创内容，转载请注明出处】赖于前一个版本，就会把它打包到自己的应用著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。中，但是如果应用中的其他组件依赖高版本，【本文受版权保护】【版权所有】唐霜 www.tangshuang.net那么就不得不面临两个选择，一个是手动解决【转载请注明来源】转载请注明出处：www.tangshuang.net依赖，另一个是把两个版本都打包进去。就n未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。pm体系而言，后者是常见的选择。因此，对【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】于组件本身而言，最好在版本之间做出一个抉【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。择，把大组件拆分为小组件，build过程原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】中尽量不依赖版本，而只需要知道是不是需要本文版权归作者所有，未经授权不得转载。【作者：唐霜】这个组件而已。因此，在componer.著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】json中，我根本不会要求开发者填写de著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。pendences的版本号。从这点上，我未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】follow的，是bower的包管理思想著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】。
未经授权，禁止复制转载。未经授权，禁止复制转载。一个component不应该自己执行某些【原创内容，转载请注明出处】未经授权，禁止复制转载。动作，比如在window上挂载一些方法。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。组件应该在被require之后再去被调用【本文首发于唐霜的博客】【本文受版权保护】。以jQuery为例，不应该在内部已经在著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。window上挂好$，应该在代码中req本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】uire后使用。但是这给测试带来了一些问【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net题，测试需要写更多实现代码。但我认为这无【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。可厚非。
【转载请注明来源】【本文受版权保护】目前而言，webpack和npm基本上是本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】一家，它们联合起来，给build埋下了我【原创内容，转载请注明出处】未经授权，禁止复制转载。上文提到的这些坑，webpack如果用在原创内容，盗版必究。【转载请注明来源】build应用的时候，往往会在不同模块之【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。间共享一个同名模块，但如果一旦这个模块被未经授权，禁止复制转载。原创内容，盗版必究。依赖的版本不同，那么就坑了。
【原创不易，请尊重版权】【本文受版权保护】以组件为包的思想，我更赞赏bower，因著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】为它在specs里写的非常清楚，main本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。这个字段就是为了build做为入口的文件【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net列表。
【本文受版权保护】【作者：唐霜】【作者：唐霜】【作者：唐霜】除了保持这种为了build而制作组件的思未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。想外，我觉得组件还应该具备两个基础特征：【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net1. 封闭性。组件虽然给外面去做buil转载请注明出处：www.tangshuang.net【作者：唐霜】d，但内部应该极其稳定，不受到任何外部变【版权所有，侵权必究】【原创内容，转载请注明出处】量的影响，无论你外部怎么运行，遇到什么b著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】ug，跟我组件没有半毛关系。2. 扩展性【作者：唐霜】未经授权，禁止复制转载。。组件意味着提供特定的接口给外部使用，对【转载请注明来源】【未经授权禁止转载】于外部的使用者而言，组件可能满足了大部分【本文首发于唐霜的博客】未经授权，禁止复制转载。需求外，却又少数一些情况无法满足，需要开【本文受版权保护】【作者：唐霜】发者在组件基础上进行扩展，或者写个方法进【原创不易，请尊重版权】【原创不易，请尊重版权】行覆盖。所以以class的形式写组件比较本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。好，这样可以使用extends对它进行扩【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】展。
【版权所有，侵权必究】【原创内容，转载请注明出处】【访问 www.tangshuang.n【未经授权禁止转载】【原创不易，请尊重版权】et 获取更多精彩内容】本文作者：唐霜，转载请注明出处。组件的依赖应该写在dependencie著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.nets里面，但是不应该把依赖代码build进转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】组件的最终成品中去，这样非常不友好。co【未经授权禁止转载】【转载请注明来源】mponent本身是提供build素材的著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】，而非plugin提供直接使用的成品。说【未经授权禁止转载】【版权所有，侵权必究】到这里，需要补充一下，bower中使用一【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。个component的时候，并不应该直接【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。在浏览器里面引用它，包括jQuery和b原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。ootstrap这两个非常流行的库，在b【原创内容，转载请注明出处】原创内容，盗版必究。ower中，它们是component，而【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】不应该直接在浏览器中使用script或l【关注微信公众号：wwwtangshuangnet】【作者：唐霜】ink引入到页面中。但是在测试的时候，依【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】赖又必须被使用，这就麻烦了，如果所有的依【原创内容，转载请注明出处】【版权所有，侵权必究】赖和你的组件都是遵循一个构建规则还好办，【未经授权禁止转载】【原创不易，请尊重版权】把依赖包们都用同样的构建工具build好【本文首发于唐霜的博客】【本文受版权保护】，再引入即可，抑或测试的时候把test目未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。标文件作为app整个build出来。我个【作者：唐霜】【版权所有，侵权必究】人推荐第二种，把test当做一个实例化的【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。app来跑。但是如果你依赖的组件构建规则转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。跟你正在使用的工具不同，那么就麻烦了，你未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。没法直接build它们。所以，不管你用什【原创不易，请尊重版权】原创内容，盗版必究。么工具，一个相对统一的构建规则在这里极其原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net重要。
原创内容，盗版必究。【本文首发于唐霜的博客】这个统一的规则第一条就是“入口文件”和“原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】模块化规范”。
【原创内容，转载请注明出处】【本文受版权保护】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu【作者：唐霜】【本文受版权保护】ang.net构建规则
入门文件，就是你在做build的时候，构【转载请注明来源】【未经授权禁止转载】建工具以哪一个文件作为entrypoin【本文首发于唐霜的博客】【作者：唐霜】t，一般会在这个文件中import或re著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。quire组件内的其他文件，最终提供对外著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】的统一接口。对于js而言，使用webpa【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netck打包，可以在js里面直接requir【本文受版权保护】本文作者：唐霜，转载请注明出处。e样式、字体、图片等文件，这非常棒，使得本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】一个组件的静态资源可以直接作为变量放到内原创内容，盗版必究。本文作者：唐霜，转载请注明出处。存中，但代价就是组件会消耗比较多的内存，原创内容，盗版必究。【作者：唐霜】以至于浏览器崩溃。
【本文受版权保护】本文版权归作者所有，未经授权不得转载。package.json中的main只能本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】是字符串，一般而言应该只能使用js，因为【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】require是为了加载模块而诞生的，诞【转载请注明来源】【版权所有】唐霜 www.tangshuang.net生webpack把它扩展了。对于webp【本文受版权保护】著作权归作者所有，禁止商业用途转载。ack而言，package.json中的著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netmain字段没有意义，你需要自己给web【作者：唐霜】本文版权归作者所有，未经授权不得转载。pack的配置项entry中传入自定义的【作者：唐霜】【版权所有】唐霜 www.tangshuang.net入口文件。诞生对于bower而言，他们则【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】不这么想。bower.json中的mai【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】n字段就是规定入口文件的。所以对于bow转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】er而言，它并不限定你遵循什么模块化规范【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。，它让你暴露你的入口文件，这样你的构建工【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。具就会顺着入口文件，把你的所有代码都bu【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。ild到自己的产品中。
【作者：唐霜】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。但是你会发现，你怎么知道bower co【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】mponent内部是以什么方式相互引用的【原创不易，请尊重版权】原创内容，盗版必究。呢？虽然我们想象中大部分情况都是采用re本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netquire，但是说实话，这并不确定，我遇【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】到过并不是用require的情况，他们在未经授权，禁止复制转载。【本文受版权保护】window上注册了一个特定的属性，然后本文作者：唐霜，转载请注明出处。原创内容，盗版必究。提供一些方法，特别是register方法【转载请注明来源】【版权所有】唐霜 www.tangshuang.net，这样内部的小模块都可以注册到这个属性中未经授权，禁止复制转载。【版权所有，侵权必究】，整个组件就依靠这个属性实现相互引用。这【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。种情况你该怎么办？目前我还没有看到一个可未经授权，禁止复制转载。【本文受版权保护】以通过window中的某个属性找到对应的【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net文件的build工具。所以说，这种对mo著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。dules规范不加规定的敞开式原则，会导【原创内容，转载请注明出处】【原创内容，转载请注明出处】致非常严重的兼容性问题。bower的这一原创内容，盗版必究。转载请注明出处：www.tangshuang.net点饱受诟病，或许是因为Twitter没有著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net发布一个构建工具来解决这个问题而导致的，【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。但也很可能是因为他们确实就看到了，构建这【原创不易，请尊重版权】未经授权，禁止复制转载。种工具可能根本是不可能的。
【作者：唐霜】【作者：唐霜】【转载请注明来源】转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ng.net不知道你读到这里的时候有没有感觉到一点，【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。就是“bower因为没有解决其modul【本文受版权保护】本文版权归作者所有，未经授权不得转载。es的build工具而逐渐被开发者抛弃，【转载请注明来源】【原创不易，请尊重版权】相反，npm因为有webpack的强力支【作者：唐霜】本文作者：唐霜，转载请注明出处。撑而大行其道”。是的，没有构建工具支撑的著作权归作者所有，禁止商业用途转载。【转载请注明来源】包管理器注定会遇到障碍，因为这里面的本质【原创不易，请尊重版权】【作者：唐霜】原因是，包管理器是为构建提供素材（组件）的，也就是说，没有一个构建工具使用包管理器原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。管理的包，那么它的这些包都是一些没有用的转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。资源。
【作者：唐霜】未经授权，禁止复制转载。【版权所有，侵权必究】CommonJS在server端被广泛使【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。用，而浏览器端AMD则是一种解决方案。E【关注微信公众号：wwwtangshuangnet】【本文受版权保护】S6绕过了这两种相对成熟的模块化规范，标【版权所有，侵权必究】【本文受版权保护】准开发者们相信，有更加高效的module【转载请注明来源】【本文首发于唐霜的博客】s解决方案。而在ES标准中，requir【版权所有，侵权必究】原创内容，盗版必究。e还是没有被囊括，这说明他们不承认Com本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。monJS的成就，认为它可能只是个临时的本文作者：唐霜，转载请注明出处。【未经授权禁止转载】解决方案，一旦未来所有环境支持ES6的m未经授权，禁止复制转载。原创内容，盗版必究。odules，那么CommonJS的历史转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。使命就结束了，那个时候，如果webpac【关注微信公众号：wwwtangshuangnet】【作者：唐霜】k和npm还在的话，不得不面临一个重大问【版权所有，侵权必究】转载请注明出处：www.tangshuang.net题：是升级后兼容老的CommonJS，还【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。是被新的支持ES6 modules的新包【本文受版权保护】【本文受版权保护】管理器及构建工具代替，最终退出历史舞台。本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】一旦在这条路上走的越远，最终的结果往往是【原创内容，转载请注明出处】原创内容，盗版必究。后者。
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。我理想中的包及构建应该是怎样的？首先，c【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】omponent应该有怎样的入口，依赖应【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。该怎么定义，内部应该遵循什么模块化规范，【本文受版权保护】【本文受版权保护】应该怎么构建和发布？其次，用这些comp【原创不易，请尊重版权】【本文受版权保护】onent的构建工具，应该怎样使用它们的未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。入口文件，如何组织单个组件和组件群的依赖【原创不易，请尊重版权】【原创内容，转载请注明出处】，输出的结果应该遵循什么原则？最后，作为本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。component的开发者和作为使用co转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netmponent的开发者各自应该注意些什么【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net？
【未经授权禁止转载】【版权所有】唐霜 www.tangshu【本文受版权保护】转载请注明出处：www.tangshuang.netang.net先解决component的内部矛盾。
著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。我认为bower式的入口指定非常好，这种本文作者：唐霜，转载请注明出处。【本文受版权保护】思想让component本身的定位非常清原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】晰，就是为了给别人build的，所以只需本文版权归作者所有，未经授权不得转载。【作者：唐霜】要提供入口文件，包括js和scss/le【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。ss，甚至不需要bundle，只需要源码【本文首发于唐霜的博客】【原创不易，请尊重版权】。依赖问题上，我也更倾向于bower这种本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。扁平的结构，树状结构确实很好可以解决版本【版权所有，侵权必究】未经授权，禁止复制转载。问题，但是往往只有扁平结构才能降低代码重未经授权，禁止复制转载。原创内容，盗版必究。复率和文件大小问题，而且版本问题其实是一【作者：唐霜】原创内容，盗版必究。个隐性问题，我认为一个组件升级到一个大版【转载请注明来源】本文版权归作者所有，未经授权不得转载。本，应该是以新的组件出现，就像docke未经授权，禁止复制转载。【本文首发于唐霜的博客】r的image一样，是单独的，而非对上一【转载请注明来源】本文作者：唐霜，转载请注明出处。个版本的覆盖，用户可以自己选择用哪一个版【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。本，或者两个一起用，但是不应该强迫一起用【转载请注明来源】【版权所有】唐霜 www.tangshuang.net。bower比较坑的地方是没有规定com【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】ponent内部应该遵循什么模块化规则，【原创不易，请尊重版权】【原创内容，转载请注明出处】对我而言，目前我所遵循的模块化规范只有ES6开始的im【转载请注明来源】【版权所有】唐霜 www.tangshuang.netport/export规范。由于这是标准，不同的建构工具可以自己去未经授权，禁止复制转载。【原创不易，请尊重版权】写解析器，比如babel可以解析为req原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netuire/module.exports，【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net未来一定会有构建工具直接支持标准，目前来原创内容，盗版必究。【原创内容，转载请注明出处】看，只有babel可以解析，但大部分构建【本文受版权保护】【版权所有，侵权必究】工具都可以支持babel插件。
未经授权，禁止复制转载。【关注微信公众号：wwwtangshua未经授权，禁止复制转载。原创内容，盗版必究。ngnet】【作者：唐霜】组件本身可能也需要构建，但是也可以不用构【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。建，如果内部遵循的规范和外部使用的构建工本文版权归作者所有，未经授权不得转载。【作者：唐霜】具遵循的规范一致，就可以不用，比如com【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ponent内部使用require，那么【本文受版权保护】【转载请注明来源】webpack就可以直接使用它。我觉得U著作权归作者所有，禁止商业用途转载。【本文受版权保护】MD也是一个可选的方案，componen本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】t内部全部采用UMD实现模块间的引用，那本文作者：唐霜，转载请注明出处。原创内容，盗版必究。么在外部工具去使用component时，本文作者：唐霜，转载请注明出处。原创内容，盗版必究。只要能够支持UMD所支持的其中一种模式，【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】都可以搞定component。
【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】【访问 www.tangshuang.n【原创内容，转载请注明出处】未经授权，禁止复制转载。et 获取更多精彩内容】一旦遵循了这些原则，使用bower比使用【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。npm更符合我们的预期。毕竟npm还是更未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】适合做一个更加稳定和优化的node模块管原创内容，盗版必究。本文作者：唐霜，转载请注明出处。理器。
本文作者：唐霜，转载请注明出处。
再说说构建工具（builder）。
这里我又要重新提到componentjs【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】，因为它是最早拥有构建component【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。思想的工具。当你使用componentj转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】s的时候，首先要从它的registry下【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net载组件，下载下来的组件总是拥有compo【未经授权禁止转载】未经授权，禁止复制转载。nent.json，这个文件里我们主要讨【转载请注明来源】【版权所有】唐霜 www.tangshuang.net论dependencies（依赖）、tem原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。plates（html模板，可以是han【本文受版权保护】未经授权，禁止复制转载。dlebars这样的模板）、script【本文受版权保护】转载请注明出处：www.tangshuang.nets（脚本，可以是js，或者coffee之【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。类的）、styles（可以是css，也可【转载请注明来源】【版权所有，侵权必究】以是scss、less之类的）。这几个字本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】段非常好的给定了入口和依赖，比如脚本的入本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net口，没有styles这个字段就表示没有样【转载请注明来源】本文作者：唐霜，转载请注明出处。式入口。在bower中直接使用一个mai【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。n字段把后三者全部囊括进去这反而感觉不是【原创不易，请尊重版权】【原创内容，转载请注明出处】太好，分开可能更清晰的指出我们想要的。
本文版权归作者所有，未经授权不得转载。【转载请注明来源】【原创不易，请尊重版权】接下来是依赖问题。
【关注微信公众号：wwwtangshua【作者：唐霜】本文作者：唐霜，转载请注明出处。ngnet】未经授权，禁止复制转载。前面提过了，component内部是不包【原创不易，请尊重版权】【版权所有，侵权必究】含依赖的，这也就是说必须由构建工具来决定未经授权，禁止复制转载。未经授权，禁止复制转载。依赖是否应该打包进bundle，以及以什转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】么形式。这一点webpack就很好，所有转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。的依赖不会出现第二次，代码重复率很低，除著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】非有人故意将代码放在component里转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】面。bower这种扁平化的结构，相对来说原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。更好解决依赖问题，因为路径非常明确，也没原创内容，盗版必究。转载请注明出处：www.tangshuang.net有版本衍生问题。
本文作者：唐霜，转载请注明出处。【作者：唐霜】【本文受版权保护】当构建工具在面对依赖时，应该考虑一个问题【关注微信公众号：wwwtangshuangnet】【本文受版权保护】，你的构建结果是什么？如果是packag转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.nete，那就是要复合commonjs，如果还原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net是一个component，那就应该符合上未经授权，禁止复制转载。【未经授权禁止转载】面我所说的一个component的特征，【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】而如何是一个plugin，那就按插件的形【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。式来好了，如果是一个库就应该提供不同情况【原创内容，转载请注明出处】【转载请注明来源】下的不同版本，而如果是一个完整的应用呢？【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】那就应该提供一个在浏览器端完整执行的bu【版权所有，侵权必究】【本文首发于唐霜的博客】ndle文件。
本文作者：唐霜，转载请注明出处。【作者：唐霜】【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshu【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ang.net所以，实际上，对于构建工具而言，更难搭建未经授权，禁止复制转载。未经授权，禁止复制转载。。如果不带着解决某类问题去开发一个构建工【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net具，而是想搞一个大而全通用性极强的构建工【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。具，会考虑一大堆不同情况，而且性能还很差本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】。构建工具的两端，一端是组件，但是组件像转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。上文指出的那样，各自不同，builder著作权归作者所有，禁止商业用途转载。【转载请注明来源】应该规定一种规范或者兼容性规则，而在另一本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。端，则是产品，也是形式多种多样。我更喜欢本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】那种专注一种的，componentjs就【本文首发于唐霜的博客】【版权所有，侵权必究】很好，送入的是component，出来的【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】也是component。而相对而言，we本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】bpack更像是打包一个SPA类型的应用原创内容，盗版必究。【原创不易，请尊重版权】。
【访问 www.tangshuang.n【作者：唐霜】【版权所有，侵权必究】et 获取更多精彩内容】【未经授权禁止转载】gulp其实是一个基础的构建工具框架，它本文作者：唐霜，转载请注明出处。【未经授权禁止转载】只是提供了管道，一端进一端出，基于gul本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】p可以开发自己的构建工具，在管道中搞定自【原创内容，转载请注明出处】未经授权，禁止复制转载。己想要的功能。
【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。ang.net本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】ng.net【原创不易，请尊重版权】结语
这篇文章没想到写那么多，这仅是我在开发c【本文受版权保护】本文作者：唐霜，转载请注明出处。omponer过程中的一些想法。comp本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】oner就是遵循上述规则的构建工具，它其【本文首发于唐霜的博客】原创内容，盗版必究。实也是输入component输出comp【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。onent的工具，输入的和bower包很著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】像，所有输出的component遵循同一【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】套规则，从而保证使用它们的framewo【本文受版权保护】【版权所有】唐霜 www.tangshuang.netrk只要接受这些规则，就可以直接使用它们本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。。
本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【访问 www.tangshuang.n【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。et 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。最后，包管理器的争端真的没有必要，因为真著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。正有价值值得完善的，是构建工具。
【未经授权禁止转载】【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。et 获取更多精彩内容】
[…] 前端包管理器争端，只不过是构建工具的牙缝菜 […]