Комбиниране на файлове с помощта на requirejs и grunt

Опитвам се да комбинирам файлове с помощта на плъгина grunt за requirejs:

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. Но след като изграждането приключи, то не работи. Това е така, защото дефиницията x=console се предоставя преди кодът в test2.js да бъде зареден, когато модулите се зареждат с помощта на requirejs.

Въпреки това, след изграждането, дефиницията x=console се появява след зареждане на кода от test2.js - което създава грешка - защото test2.js прави извикване на x, което е глобална променлива между двата js файла.

Трябва да се уверя, че requirejs изгражда проекта в един .js файл, като същевременно гарантира, че няма amd код (require/define) и кодът се изпълнява в ТОЧНО същия ред, както при requirejs, зареден в браузъра.


requirejs gruntjs grunt-contrib-requirejs
person EternallyCurious    schedule 30.05.2014    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Мисля, че може да се нуждаете от по-добро разбиране на дефиницията на асинхронния модул (AMD) Спецификация на API. И в двата случая модифицирах малко вашия код, за да се придържа по-добре към синтаксиса на 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
});
person idbehold    schedule 30.05.2014
comment
Определено имам нужда от това! Всъщност затова зададох въпрос, относно квора. quora.com/ .Оценявам помощта ви. - person EternallyCurious; 30.05.2014
comment
Въпреки че съм присвоил конзола на x, в действителност x съдържа екземпляр на обект, който искам да бъде достъпен като глобална променлива за всички мои javascript файлове и модули. По начина, по който сте го дефинирали, ще се създава нов екземпляр на x всеки път, когато бъде извикан от някакъв javascript като този: define(['x'], function(x){. Искам един екземпляр в моето приложение. - person EternallyCurious; 31.05.2014
comment
Още една точка! Истинският проблем, който искам да реша, е действителната конфигурация на грухтене - която трябва да изгради проекта така, че компилираният файл да работи по абсолютно същия начин като файловете, заредени индивидуално с requirejs. Решението, което сте дали, не предоставя това. - person EternallyCurious; 31.05.2014
comment
@EternallyCurious, независимо от това какъв обект присвоявате на x, той винаги ще препраща към един и същ екземпляр, независимо къде го изисквате. Всички непримитивни типове данни в javascript се предават по референция. И в двата случая, ако искате глобален обект, защо просто не направите window.x = { … }? - person idbehold; 31.05.2014