RequireJS, Sea.js, Browserify和webpack的对比

  • 7
  • 2,528 views
  • A+
所属分类:Node及周边

在前端领域,新技术与轮子很多,在模块加载方面也不另外,这篇文章列出了当下为人所知的四种种模块依赖管理工具,其中大部分本人都有接触过,故结合使用经验与相关资料,总结写下它们之间的异同点。

RequireJS

本人最早接触的模块化工具是RequireJS,这在前端领域算是一个老牌模块化加载器,从诞生到现在已有6年有余,可见其生命力之顽强,不断前行。我认为RequireJs对下面三个代码组织管理工具的诞生也或多或少有一定的影响。

RequireJS是为了在浏览器端写模块化代码而出现,它的写法符合AMD规范。

文件引用

模块定义

资源打包

优劣之处

优点: RequireJS是前端模块化工具的老牌,它在推广过程中推出了AMD的开发理念,解放了生产力,在推出初期拥有不可磨灭的影响力,同时在它的发展过程中推出了许多插件,促进了整个生态的发展,也为广大前端开发者提供了极大的便利。

缺点: 必须引入require.js文件,对于轻量级应用而言,尤其是移动端项目,未免有些臃肿庞大。


Sea.js

阿里玉伯写的一款模块加载器,在推广过程中产出了CMD的标准,其与AMD区别具体请看AMD 和 CMD 的区别有哪些?

文件引用

在 hello.html 页尾,通过 script 引入 sea.js 后,有一段配置代码:

模块代码

资源打包

sea.js通过一款名为spm的工具构建打包,此乃坑爹中的坑爹,老子花了好久都没打包出任何东西。

优劣之处

优点: CMD规范推崇依赖后置,我们可以在需要使用模块的地方再使用引入语句 require,更符合人的自然思维,而不需要像Require.js一样在定义一个模块的时候就把依赖写上(新版本的RequireJS好像也可以依赖后置了)。

缺点: 值得一提的是,玉伯曾多次在社交平台或场合中说过,Sea.js已死。但是我还是要吐槽一下,sea.js的文档不完善,社区衰落,打包使用了我完全不关注的spm,并且spm版本跨度大,不向下兼容,折腾了很久还没有打好包,有问题只好在github上的issue查看解决方案,不料解答太杂乱,很难找到问题所在,最重要的是,我刚开始使用sea.js的时候,玉伯竟然宣布sea.js已挂...


webpack

这是最近兴起的一种模块加载器兼打包工具,功能强大,主要体现为:

  • 任何东西均是模块,所有的东西(图片、css等)都可以通过require的方式引进。
  • 同时支持CommonJSAMD模块,对于熟悉RequireJS或者是node.js的同学来说是个巨大的福利,我们可以按照自己的习惯选择适合自己编写代码的方式。
  • 内置插件机制丰富,提供了对CoffeeScript、ES6的支持,同时也可以使用webpack-dev-server做测试服务器,调试起来非常方便。
  • 支持对CSS、图片等资源进行打包,完成了gulp的部分功能。
  • 在内存完成打包,效率更高,能够满足开发过程中实时打包的需求。

总而言之,在我看来,webpack不仅仅是一个工具,而是前端的整体工程化方案

安装方法

模块定义

上面提到了,webpack支持AMD和CommonJS模块, 所以我们可以自由选择自己喜欢的模块方式编写代码

编译打包

优劣之处

优点: 总结得出,webpack实在是厉害,配置简单,功能强大,使用舒心,在我看来,工具就应该是方便人类而设,不应该在上面花太多的时间成本,同时因为webpack支持commonJS规范,这使得未来前后端(node.js)模块的共用成为可能,所以现阶段webpack将会是本人的最优选择。

缺点: 需要时间的考验


Browserify

// 尚未使用过,有待研究


总结

新的JavaScript模块标准使得曾为竞争关系的SeaJS和RequireJS都过时了,Browserify和webpack成为新时代模块化管理的潮流,另外从SeaJS的衰落中也可看到,只有开放英文社区才能真正使得一个技术产品能被大众所熟知并做出贡献,在轮子倍出的前端领域尤为如此。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
沉默的螺旋

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:7   其中:访客  5   博主  2

    • avatar 律通律师软件 0

      谢谢分享。

      • avatar 斯托克笔记 0

        哇哦,好专业的博客。

          • avatar 沉默的螺旋 Admin

            @斯托克笔记 欢迎常来:)

          • avatar 云联中国 1

            博主写的挺不错,有没有兴趣交换友情链接?我的QQ574860431竟辈

              • avatar 沉默的螺旋 Admin

                @云联中国 好的没问题

              • avatar 购物街 0

                学习了。

                • avatar 英语论文代写 0

                  支持楼主的博客,赞赞。