基于requirejs的前端模块化工程,可以选择什么工具来实现自动化压缩和合并

目前情况

  • 整个项目采用的requirejs 来加载和管理脚本和插件样式

  • 项目使用了很多js 插件,全部通过requirejs 来组织和加载的

  • 项目中还有一些自己实现或封装出来的基础建设和插件。

开发过程中每个页面都有自己的一个js 文件,每个页面的脚本都或多或少依赖一些其它js 文件,因此我想要在发布上线的时候,能 根据模块来压缩合并js

比如我用户管理有两个页面:
userlistuserinfo 两个页面,userlist 页面有一个userlist.jsuserinfo 页面有一个userinfo.js 我希望能合并压缩成一个user.js 然后两个页面共用一个 js,这种按照业务模块来合并压缩的方式。

问题

  1. 有没有能满足如上要求的前端自动化工具可以推荐?

  2. 如果不按照业务模块压缩而是全部压缩合并,那么有没有什么工具能实现对基于requirejs 的这种组合的自动化工具?

阅读 8.6k
7 个回答

你在开发的时候,页面就引用 user.js,如果你想把 userlist 和 userinfo 的 JS 分开写,就在 user.js 里引用 userlist.js 和 userinfo.js,但不要在 HTML 里引用,因为这两个文件最后是要合并到 user.js 里面的。

然后,RequreJS 文档的 Optimizer一节 提到了用 r.js 来合并压缩脚本。

另外,你关注下 jNs 哇,这个版本可用但 API 还没稳定,下个版本有惊喜! ^_^

推荐webpack

项目开始的时候使用requirejs,中间各种require资源,等到性能优化的时候发现,一切变得这么复杂。require本身作为模块加载器,但野心却想通过各种插件来做更多的事情,所以很多团队到了后期都会遇到这个头疼的问题。以下说几个方案。

  • r.js这个应该是你的首选,因为使用require写的代码,使用r.js的不用动代码结构,价格配置文件就可以

  • 使用grunt或是gulp的require插件来完成

  • webpack打包

gulp(或者grunt) 帮你搞定一切! 压缩 合并 自动化
部署OK 一句命令的事 里面的jshint还可以帮你检查js语法错误
还可以编译的sass 等等

FIS3也不错,上手也简单

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏