将requireJS文件与grunt合并

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'); 

};

我在WHen中加载optimized.js，如下所示

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

我得到ReferenceError:没有定义require

Answer 1

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

如下所示：

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

Answer 2

我发现requireJS只接受'main‘作为数据主源

因此，不是

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

我得到了

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

并将呼叫声配置更改为

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

Answer 3

看看问题之外的评论，首先我发现George Raith在你的代码中遇到了一个问题:你需要包含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"
            }
       }
    }
});

(我还没有运行过这段代码，所以请注意输入错误。)对于requireLib，您必须将路径放入require.js文件。我们必须使用requireLib作为模块名称，因为require是保留的。使用这种配置，您应该只能加载optimized.js文件。