用grunt合并requireJS文件

Question

我想合并简单的requireJS解决方案中使用的js。

这是我main.js

require.config({ 
paths: { 
    'jquery': 'jquery-2.0.3.min', 
    'dataTable': 'jquery.dataTables'  
} 
}); 

define(['jquery','dataTable'], function($) { 
'use strict'; 
$(function() { 

    $('.tablesorter').dataTable(); 
}); 

}); 

而且我gruntFile.js

module.exports = function(grunt) { 

grunt.initConfig({ 
requirejs: { 
    production: { 
    options: { 
     name: "main", 
     baseUrl: "", 
     mainConfigFile: "main.js", 
     out: "optimized.js" 
    } 
    } 
} 
}); 

grunt.loadNpmTasks('grunt-contrib-requirejs'); 

grunt.registerTask('default', 'requirejs'); 

}; 

，当我在这样的

<script src="optimized.js"></script> 

的HTML载入optimized.js我得到 ReferenceError：require is not defined

Answer 1

在包含optimized.js之前，您必须在页面上包含require.js。

像这样：

<script src="/path/to/require.js"></script> 
<script src="/path/to/optimized.js"></script> 

Answer 2

我发现requireJS只接受 '主' 作为数据的src

所以不是

<script data-main="optimized" src="require.js"></script> 

我

<script data-main="prod/main" src="require.js"></script> 

并改变t他咕噜config来

requirejs: { 
    production: { 
    options: { 
    name: "main", 
    baseUrl: "", 
    mainConfigFile: "main.js", 
    out: "prod/main.js" 
    } 
    } 
} 

Answer 3

望着除了问题的意见，首先我看到乔治·拉茨打一个问题，您的代码：您需要包括require.js。

然后你说$('.tablesorter').dataTable()没有执行。这是因为您使用define而不是require。使用此：

require(['jquery','dataTable'], function($) { 
    'use strict'; 
    $(function() { 
     $('.tablesorter').dataTable(); 
    }); 
}); 

的调用define只寄存器与RequireJS的模块。它不是执行一个模块。所以$('.tablesorter').dataTable()不会执行就不足为奇了。您必须使用require的形式，它需要回拨才能执行您想要的操作。

至于将RequireJS与您的项目包含在一个文件中，您必须明确地要求它。优化的文档给出了这样的例子：

node ../../r.js -o baseUrl=. paths.requireLib=../../require name=main include=requireLib out=main-built.js 

你的配置（在一个问题中更新）将是这个样子：

grunt.initConfig({ 
    requirejs: { 
     production: { 
      options: { 
       name: "main", 
       baseUrl: "", 
       mainConfigFile: "main.js", 
       paths: { 
        requireLib: <path to require js> 
       }, 
       out: "optimized.js", 
       include: "requireLib" 
      } 
     } 
    } 
}); 

（我没有运行此代码，所以了望错别字）。你必须把你的require.js文件的路径requireLib。我们必须使用requireLib作为模块名称，因为require是保留的。使用这种配置，您应该只能加载您的optimized.js文件。