requirejs/seajs和webpack/browserify各自的优势以及如何取舍？
个人平时webpack用的多一点，感觉很方便，并且上线前可以根据需求打包好，browserify应该和它是同类。requirejs也试着用过，seajs和它应该是同类，需要在页面上额外写一个入口。本人现在做后端，想往前端方向发展，现在前端生产环境经验不足，想问下这两派各自有什么优势，大家是怎么选择的呢？ 谢谢。
按投票排序
不想多说，就说我的建议：JavaScript 直接上 ES6 或者 TypeScript；模块化就上 browserify 或者 webpack，如果非要用 requirejs/seajs，那就用 requirejs，当然我的建议是不用。最终选择还是看场景，不过最好是参照上面两条。
就打包本身来说，amd规范已经是过时了，但是对amd或者cmd的使用还在继续，amd规范天然具有不打包就可调试的优势，而commonjs需要伪装成cmd或者在文件系统中才可以
这篇文章介绍得很清楚，除了seajs外，各个的优缺点都大概的罗列在了里头。目前的话，我估计还是会暂时用requirejs+gulp，然后边关注webpack的发展，因为我不想去冒险用一个生命力周期不久的产品，目前看到了webpack的很多优势并不代表什么，能否广泛使用我觉得才是关键，你总不能期待每次团队来个新人就得帮他培训，补充下webpack的基本知识吧。这个也不错：收藏，11.7k 浏览
前端javascript文件越来越多了，依赖加载，文件合并的问题也就随之出现。好在有基于AMD规范的requirejs和国产基于CMD规范的seajs可以管理依赖。但是，使用这样的js来管理js模块的依赖，就会导致页面js文件请求就会变多，为了减少文件请求，一般的文件拼合工具就不起作用了，比如grunt的concat工具。
好在requirejs有r.js来解决这个问题。而且使用也简单，容易上手。
PS：之所以没选择优秀的seajs，是因为spm打包工具实在是难以上手。
在开始之前，我们假定你已经掌握了requirejs的使用，若是不懂，可以看看阮一峰老师的，写得很好。另外，你需要有node环境和git，那么这些条件都准备充足了，神马都好办了。
尽管官方英文文档也有API，但是，写得比较啰嗦，在命令行敲配置，实在是很二逼的做法啊！想不通为何不直接写使用build.js来进行任务配置。
好，先看看我自己建立的测试文档，目录如下图：
目录中，r.js和require.js两者缺一不可。
abc 代码如下：
javascriptdefine({
color:'red'
javascriptrequire.config({
baseUrl: 'js'
define(['a'], function(a) {
console.log('b.js:' + a.color);
color: a.color,
width: '120px'
javascriptrequire.config({
baseUrl:'js'
define(['b'],function(b){
console.log('run c.js :'+b.color+','+b.width);
从代码可以看出，b.js依赖于a.js，c.js依赖于a.js和b.js。作为示例，这里写得非常简单。
好了，下面看看build.js的配置，为了带来实验的成就感，这里的配置非常简单，r.js github有更详细的配置，此处不详细描述了。
javascript({
appDir: './',
baseUrl: 'js',
dir: '../r6-built',
jquery: 'empty:'
modules: [
配置完成后，b.html和c.html分别则是对b.js和c.js的引入。这个我就不用贴代码了。
进入目录，命令行输入：node r.js -o build.js，'-o'是自动优化的意思。
尼玛，报错了。没找到r.js。所以，要运行任务，目录得先找对。
重来，进入 r.js 和 build.js 对应的目录（这两个js最好放在同一目录位置），并运行。
运行成功，有木有啊！太哈皮了，然后看看发生了什么。
啊啊啊~~~，嗯嗯~~~，不错呢。和r6同一级生成了一个r6-build目录，该目录下的文件名和r6下的文件名一致。但是内容肯定发生了变化。
除了css被去掉了注释之外（r.js也是解决css文件@import的工具，@import可以实现css的依赖，而r.js可以合并@import导入的文件，这点，less也可以做到，但是对于不喜欢使用less的童靴来说，r.js则是不错的选择），所有的js也被压缩了。而我们最为关注的b.js和c.js代码中，是否已经是把依赖拼合好的代码呢？
看一看吧（因为代码被压缩成了一行，为了好看，所以我使用sublime jsformat格式化了一下代码）：
javascriptdefine("a", {
color: "red"
}), require.config({
baseUrl: "js"
}), define("b", ["a"], function(a) {
return console.log("b.js:" + a.color), {
color: a.color,
width: "120px"
javascriptdefine("a", {
color: "red"
}), require.config({
baseUrl: "js"
}), define("b", ["a"], function(a) {
return console.log("b.js:" + a.color), {
color: a.color,
width: "120px"
}), require.config({
baseUrl: "js"
}), define("c", ["b"], function(a) {
console.log("run c.js :" + a.color + "," + a.width)
尼玛哟，除了正确把依赖文件代码拼合好了，连名字都起好了（define的第一个参数），省去了手动的麻烦。
再来看看r6文件下的c.html和r6-build下的c.html差别：
r6/c.html 截图：
r6-build/c.html 截图：
很明显，使用了r.js优化后，页面中只有require.js和c.js了，而c.js就是依赖拼合后的文件。
使用了r.js后，模块化的文件请求就不是问题了。当然，我给的示例很简单，打包没有发现bug吧？
哈哈哈，给出正确的build.js配置。
ps：以上仅仅是个简单的开始，grunt工具也有requirejs优化，先写到这里，我会继续完善。
更新：关于gulp的requirejs构建，请参考：，会使用r.js的配置，那么这个也很容易使用了。在gulpfile中，我们只需要引入requirejs的node模块，然后把requirejs的options静态对象配置包裹到optimize方法中即可。
若有疑问，请留言联系我。
你可能感兴趣的文章
14 收藏，5.7k 浏览
13 收藏，2.6k 浏览
25 收藏，277 浏览
本文隶属于专栏
github：xiaomingming
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
我要举报该，理由是：
扫扫下载 App
SegmentFault
一起探索更多未知收藏，356 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
JS文件里面:
define(function(){
require("./a.js");
修改a.js，压缩后版本为 a-7d302eacde.js
请问怎么替换JS文件里面
require("./a.js")
require("./a-3f.js")
gulp有什么插件吗？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
用吧，可以实现你要的
同步到新浪微博
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要举报该，理由是：
扫扫下载 App
SegmentFault
一起探索更多未知Handlebars 和 SeaJS 的结合使用 - 推酷
Handlebars 和 SeaJS 的结合使用
Handlebars 是一款语义化的模板引擎，其模板语法就像是在写普通的 HTML 代码，并且在性能方面也表现优秀。本文将介绍 Handlebars 如何结合 seajs 来使用。
模板引擎的编译和预编译
开发者用语义化的代码编写好模板，然后将编写好的模板再进行编译，这个编译环节是必不可少的。服务端的模板也同样需要编译，只是这个编译环节是在服务器上进行的。
前端模板引擎要么是直接在浏览器中进行编译，要么就先将模板进行预编译，预编译的代码是可以直接放到浏览器中运行的。在浏览器中编译就意味着会有一些编译时的性能开销，如果要追求前端性能的话，肯定是使用预编译好的模板。
Handlebars 提供了支持编译和不支持编译的 2 种版本，不支持编译的 runtime 版本只能运行预编译好的模板，而 runtime 版本的库文件理所当然要小得多。
在开发环境中，要确保开发方便，引用的是支持编译的库文件，而在生产环节中，模板经过了预编译，此时引用的是 runtime 版本。
将模板文件模块化
模板可以通过 script 标签插入至页面中，但是这种使用方式很不灵活，可以将模板单独编写成一个独立的文件，然后使用 seajs 把模板文件当作一个模块来进行加载，这样开发和预编译就方便了。
假如有一个 a.tpl 的模板文件，其中包含的就是模板内容：
&div class=&entry&&
&h1&{{title}}&/h1&
&div class=&body&&
上面的文件不是一个 JS 文件，针对这种文件的加载，seajs 有专门的
插件来实现。
同源策略的限制
但是在加载非 JS 的文本文件时，就只能使用 Ajax 来进行加载，而使用 Ajax 就会受同源策略的限制。
跨域的问题可大可小，在开发环境中，页面域名和静态资源的域名是同一个的话那么就根本没有这个烦恼。又或者是只在高版本浏览器中测试，可以通过在服务端设置 Access-Control-Allow-Origin 的响应头来解决。
我们的团队在开发时不光是跨域的，还得兼容低版本浏览器，并且还是跨多个域，环境确实有点复杂。解决办法还是有的，只是比较繁琐。
因为是开发环境，可以将测试的顶级域名都统一，比如页面域名是 ，而静态资源域名是 ，那么两个域名的顶级域名是相同的，这就变成了仅仅是跨子域了，这是第一步。
在页面中设置 document.domain 为顶级域名 ，在静态资源域名的根目录下放置一个 proxy.html，proxy.html 中也设置同样的 document.domain。使用 iframe 将 proxy.html 插入至页面中。这是第二步。
接下来就是改造 seajs-text 插件，只要是跨域的 tpl 请求，都通过 iframe.contentWindow 下的 XMLHttpRequest 对象来创建 Ajax。这是最后一步。
通过设置同样的顶级域名把问题简化成跨子域，然后使用 iframe + document.domain 来解决跨子域，再对 seajs-text 进行一些改造就能愉快的使用 seajs 来加载 tpl 文件了。
需要注意的是，这只是开发环境的改造，到生产环境中，会将 tpl 合并，这样就没有跨域的烦恼了。
上面说了一大堆开发环境需要做的事，tpl 在上线的时候是需要经过预编译的，预编译后还会对其进行合并。
在开发的时候，使用 seajs-text 插件来加载 tpl，预编译后，将 tpl 转化成一个 CMD 模块。使用 gulp 的
插件轻松搞定。
预编译好后，还需要将编译好的模块进行合并，使用我在之前文章中提到的
，gulp-seajs-combo 提供了一个使用插件的接口，结合上面提到的2个插件。
var handlebars = require( 'gulp-handlebars' );
var wrap = require( 'gulp-wrap' );
seajsCombo({
plugins : [{
ext : [ '.tpl' ],
handlebars(),
wrap( 'define(function(){return Handlebars.template(&%= contents %&)});' )
开发环境和生产环境的区别
综合上面提到的编译和预编译，跨域和不跨域，所以在开发环境引用的库文件和生产环境引用的库文件是不同的。开发环境引用的是带编译功能 handlebars 和 支持跨域功能的 seajs-text，而在生产环境中，引用的是 handlebars-runtime 版和不支持跨域功能的 seajs-text。
不同环境引用的不同的 Handlebars 版本，如果模板未编译，需要调用 pile 来对模板进行编译，如果编译过就可以直接执行。那么对于开发者来说，统一 API 接口肯定更人性化，开发者无需过多的关注编译还是未编译。在这里对 Handlebars 增加一个方法，开发者只需统一调用该方法即可，如果拿到的模板未编译，那么就先尝试编译，编译过就直接执行。
pilePlus = function( source, context, options ){
var html = '',
if( typeof context !== 'object' ){
if( pile && typeof source === 'string' ){
template = pile( source );
html = template( context, options );
html = source( context, options );
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
排版有问题
没有分页内容
视频无法显示
图片无法显示}