用 grunt 合并 requireJS 文件

Question

我想结合使用的js做一个简单的requireJS解决方案。

这是我的 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'); 

};

当我像这样在 html 中加载optimized.js

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

我明白了 ReferenceError: 要求未定义

Answer 1

您必须先在页面上添加require.js，然后才能添加optimized.js。

像这样：

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

Answer 2

我发现 requireJS 只接受 'main' 作为 data-main src

所以不是

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

我明白了

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

并将 grunt 配置更改为

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

Answer 3

看看除了问题之外的 cmets，首先我看到 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"
            }
       }
    }
});

（我没有运行此代码，因此请注意拼写错误。）您必须将require.js 文件的路径放入requireLib。我们必须使用requireLib 作为模块名称，因为require 是保留的。使用这种配置，您应该只能加载您的 optimized.js 文件。