使用requirejs和grunt组合文件 [英] Combining files using requirejs and grunt

问题描述

我试图使用grunt插件为requirejs组合文件： contrib-requirejsrel =nofollow> https://www.npmjs.org/package/grunt-contrib-requirejs

这里是配置：

  requirejs：
编译：
选项：
 #appDir：'./' 
 baseUrl：client
 mainConfigFile：client / test1.js
名称：test1
 out：build / test.js
 onModuleBundleComplete： （数据） - > 
 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在浏览器中加载时，程序工作正常。但构建完成后，它不起作用。这是因为定义 x = console 是在使用requirejs加载模块时加载test2.js中的代码之前提供的。

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

我需要确保requirejs将项目构建到一个.js文件中，同时确保没有amd代码是存在的（require / define），并且代码以与在浏览器中加载的requirejs相同的顺序执行。 我认为您可能需要更好地了解异步模块定义（ AMD ）API规范。无论哪种情况，我已经修改了一些代码以更好地遵守AMD的语法，并且创建了第三个文件来定义 x ，如下所示：

1. test1.js
   
   

    require（['test2']，function（x）{
    x.log（'this is test1'）; 
   }）; 
     




2. test2.js $ b定义'test2'模块，它依赖于'x'模块
   define（['x']
   

   ，函数（x）{
x.log（'this is test2'）;
return x; //返回x;它等于控制台
}）;





3. x.js $ b

   //定义没有依赖关系的'x'模块
define（function（）{
console .log（'this is x'）;
return console; //返回控制台
}）;


I am trying to combine files using the grunt plugin for requirejs:

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

Here is the configuration:

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: ""

Here are the input and output javascript

Input: 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;

The program works fine when loaded in browser with requirejs. But after the build is done, it does not work. This is because the definition x=console is provided before the code in test2.js is loaded when the modules are loaded using requirejs.

However, after the build, the definition x=console appears after the code from test2.js is loaded - which creates an error - because test2.js makes a call to x which is a global variable between the two js files.

I need to ensure requirejs builds the project into a single .js file while ensuring that no amd code is present (require/define) and the code is executed in the EXACT same order as with requirejs loaded in the browser.

解决方案

I think you may need a better understanding of the Asynchronous Module Definition (AMD) API specification. In either case I've modified your code a little bit to better adhere to AMD's syntax and I've created a a third file to define x like this:

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

这篇关于使用requirejs和grunt组合文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！