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

};

我在html中加载optimize.js就像这样

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

我明白了 ReferenceError：未定义require

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

除了问题之外，看看评论，首先我看到George Raith遇到了代码中的一个问题：您需要包含require.js。

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

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

仅使用RequireJS调用define 注册模块。它不执行模块。因此$('.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的{{1}}文件中。我们必须使用requireLib作为模块名称，因为保留了requireLib。使用这种配置，您应该只能加载require文件。

使用grunt合并requireJS文件

3 个答案: