Will Binns-Smith是一位热爱JavaScript的全栈工程师,喜欢通过技术来解决实际问题。他开发了Bonobos.com的前端购物车功能。Will喜欢与设计师一对一工作,将PC网站转换为针对更小的触摸设备的站点。近日,Will撰写了一篇 文章 ,谈到了Node.js有哪些做法和特性值得前端应用学习。
在 Web平台能从Node.js学到什么 这篇文章中,我们探索了由开发者为开发者所创建的小范围抽象所带来的好处。在这篇文章中,我们来了解如何以及为何应该将这种开发风格引入到你自己的Web前端中。
选择你自己的方式
作为小模块的用户,如果你不接受依赖所做的变动,那么你可以换另一个依赖。也许应用会使用某个模块的新版本(比如说2.x),而应用的另一个依赖使用的却是老版本(比如说1.x)。在Node中,由于依赖的查找是从邻近的node_modules目录开始,然后沿着文件系统逐级向上,即便需要不同版本号的相同模块,这种方式也是可以满足需求的。如果版本匹配,那么只会使用一个副本。
浏览器中的npm模块?这难道不是Node的事情?
你可能想知道如何能在不使用成百上千个script标签或是不在RequireJS配置文件中使用那么多条目的情况下维护如此多的依赖。也许你还想知道如何在浏览器中使用来自于npm的模块轻松创建SVG元素。诸如 Browserify 与 Webpack 等现代工具让这件事成为了可能,他们会通过Node所用的相同的CommonJS require语句来追踪应用的依赖图。他们使得一个大型包文件中的模块彼此可见,而你在页面中则可以通过单个script标签将其引入进来。
另一个常见问题就是这么做会不会增加向浏览器传送的JavaScript文件大小。在新版的npm中,这种模块树采用了扁平形式,同时又会向应用中的每个依赖提供所需的版本。借助于这种方式,你不会传递任何不需要的库的副本,同时又能满足每个模块的要求。此外,还有一个名为 rollup 的更加新颖的包管理器,它使用了ES2015模块格式,只打包你所导入的模块的子集。
我所认识的很多人都对将多个jQuery版本放到浏览器中这个想法感到惊讶。没错,这么做确实有些恐怖,虽然做了精简与gzip压缩,但jQuery依然会有30KB的大小。不过,传输2个、3个、甚至4个2KB大小的库的副本相比起来却是微不足道的,特别是这么做能够避免手工解析依赖和升级jQuery以及安装的那些插件。即便如此,你也只应该在应用中包含了很多模块,并且这些模块又依赖于很多不兼容模块的情况下才这么做,因为 npm 3在默认情况下会尽可能打平模块目录 。你可以通过简单的安装随意使用npm注册的100,000多个模块。
界限在哪里
我们先来了解一些术语:包指的是可以发布到npm注册中心或是通过git仓库使用的单元。不过在CommonJS中,模块与文件是一一对应的。因此,一个包可以包含多个模块,不过通常情况下,一个npm包本身就是一个模块。
定义包的职责是最困难的一件事。如果包的范围过大,那么就会出现破坏性的改变,其后果就是破坏了生态圈。与之类似,如果一个包有很多依赖,那么破坏性的改变与Bug就会导致整个系统出现级联更新,无论开源还是内部使用都是如此。在设计包的范围时,一个好的原则就是软件 组件的内聚性 。本质上,如果几个组件会一同变化,那么他们就应该属于同一个包。如果不是,那就请抽取出来!
请记住,借助于npm与大多数包管理器,一个包不一定需要一个专门的仓库。如果过多的Pull Request的负担阻碍了发布新模块的流程,那就请考虑创建新的仓库,同时发布每一个包。Babel是个开源的JavaScript编译器,它通过这种方式在单个仓库中维护了100多个包,极大地提升了效率,同时又将每个包发布到了npm中。
值得注意的是,Bower(另一个JavaScript包管理器)的一个限制是它使用Git仓库(或是tarballs)作为接收模块代码的方式,因此它需要为每个包都创建一个仓库。我的建议则是 使用npm 。
尝试