使用 requirejs 和 grunt 组合文件

Question

我正在尝试使用 requirejs 的 grunt 插件合并文件：

https://www.npmjs.org/package/grunt-contrib-requirejs

这里是配置：

requirejs:
      compile:
        options:
          #appDir: './'
          baseUrl: "client"
          mainConfigFile: "client/test1.js"
          name: "test1"
          out: "build/test.js"
          onModuleBundleComplete: (data) ->
            outputFile = data.path
            fs.writeFileSync(outputFile, amdclean.clean(
              'filePath': outputFile
            ))
          wrap:
            start: ""
            end: ""

这里是输入和输出的javascript

输入： test1.js

var x = console;
require(['test2'], function() {
  return console.log('Hello');
});

test2.js

x.log('this is test2');

test.js

var test2, test1;
x.log("this is test2"), null, test2 = undefined;
var x;
x = console, function () {
    return console.log("Hello")
}(), test1 = undefined;

该程序在使用 requirejs 加载到浏览器中时运行良好。但是构建完成后，它不起作用。这是因为在使用 requirejs 加载模块时，在加载 test2.js 中的代码之前提供了定义 x=console。

但是，在构建之后，定义 x=console 出现在加载来自 test2.js 的代码之后 - 这会产生错误 - 因为 test2.js 调用了 x ，这是两个 js 文件之间的全局变量。

我需要确保 requirejs 将项目构建到单个 .js 文件中，同时确保不存在任何 amd 代码（require/define），并且代码的执行顺序与在浏览器中加载 requirejs 的顺序完全相同。

Answer 1

我认为您可能需要更好地了解异步模块定义(AMD) API specification。无论哪种情况，我都稍微修改了您的代码以更好地遵守 AMD 的语法，并且我创建了第三个文件来定义 x，如下所示：

1. test1.js

   // Require the 'test2' module (which is passing x; which is equal to console)
   require(['test2'], function(x){
     x.log('this is test1');
   });
   

2. test2.js

   // Define the 'test2' module which depends on the 'x' module
   define(['x'], function(x){
     x.log('this is test2');
     return x; // Return x; which is equal to console
   });
   

3. x.js

   // Define the 'x' module which has no dependencies
   define(function(){
     console.log('this is x');
     return console; // Return console
   });