Почему мое приложение AngularJS + RequireJS не собирается через grunt-contrib-requirejs?

У меня есть src моего приложения. Я использую АнгулярДжС. Я использую RequireJS в качестве загрузчика модулей. Я использую Grunt как средство запуска задач. Когда я запускаю приложение, используя src: все хорошо. Когда я создаю приложение с помощью Grunt, приложение не работает. У меня нет ошибок в консоли.

Главное, что я заметил: мой код (код моего приложения: app.js и файлы под js/) не отображается в выходном файле, который установлен в настройках задачи grunt. Кроме того, я не думаю, что есть что-то в AngularJS.

Основной файл конфигурации:

require.config({
  paths: {
    'angular' : '../components/angular/angular',
    /* etc..... */
    'jquery': '../components/jquery/dist/jquery',
    'application': './app'
  },
  shim: {
    /* etc */
    application: {
      deps: ['angular']
    },
    angular: {
      exports : 'angular'
    }
  },
  baseUrl: '/js'
});

require(['application', 'angular', 'ngRoute', 'bootstrap' /* ngRoute and bootstrap from etc :) */], function (app) {
  app.init();
});

Мое приложение в app.js:

define([
  'require', 'angular', 'main/main', 'common/common'
], function (require) {
  'use strict';
  var angular = require('angular');
  var app = angular.module('myApp', ['ngRoute', 'main', 'common']);
  app.init = function () {
    angular.bootstrap(document, ['myApp']);
  };
  app.config(['$routeProvider',
    function ($routeProvider) {
      $routeProvider
        ./* ... some code */

    }
  ]);

  return app;
});

Я добавляю основной файл конфигурации RequireJS в конец тега body:

<script type="text/javascript" src="components/requirejs/require.js" data-main="js/bootstrap.js"></script>

Теперь у меня проблема. В качестве системы сборки у меня Grunt. У меня есть такая задача:

grunt.initConfig({
  requirejs: {
    compile: {
      options: {
        baseUrl: "public/js",
        mainConfigFile: "public/js/bootstrap.js",
        name: 'bootstrap',
        out: "build/js/bootstrap.js",
        optimize: 'none'
      }
    }
  },
  // etc

У меня нет оптимизации, поэтому я получаю около 11 тысяч строк кода в выходном файле.

Как я сказал. Основная проблема: в выходном файле нет кода AngularJS и кода приложения.

Почему? Я правильно настроил mainConfigFile. Проблема в конфигурационном файле RequireJS? Но все в порядке, когда я запускаю свое приложение на src.


person Sharikov Vladislav    schedule 18.01.2016    source источник


Ответы (1)


Было бы лучше, если бы вы предоставили точный вывод ошибок. И откуда вы это взяли (из консоли браузера или из терминала в процессе сборки)

А пока я предложу некоторые корректировки, которые могут помочь в вашем случае.

angular: {
    exports : 'angular'
}

Здесь вы уже экспортировали angular.js в локальную переменную global (внутри каждого блока require и define).

И, выполняя var angular = require('angular');, вы, возможно, асинхронно переопределяете переменную angular внутри вашего модуля app.js.

Поскольку 'require' добавляется в блок define, поскольку r.js всегда читает, какой модуль нужно загрузить на самом первом этапе, а затем объединить в один файл. И это может спутать r.js со слиянием requireJS с самим собой.

Предложите эту корректировку для вашего app.js:

define([ // Removed 'require' because no needed , it is already global and usable anywhere
  'angular', 'main/main', 'common/common'
], function () {
  'use strict';
  // var angular = require('angular'); // This is a very common mistake. You are not going to call angular this way, requireJS difference with commonJS. 
  var app = angular.module('myApp', ['ngRoute', 'main', 'common']);
  app.init = function () {
    angular.bootstrap(document, ['myApp']);
  };
  app.config(['$routeProvider',
    function ($routeProvider) {
      $routeProvider
        ./* ... some code */

    }
  ]);

  return app;
});

И последнее, но не менее важное data-main="js/bootstrap.js" Думаю, это должно быть js/main.js или опечатка.

EDIT добавлены пояснения для 'require' в блоке define и локальной переменной angular.

person Linh Pham    schedule 19.01.2016
comment
Спасибо за ваш ответ. Как я уже упоминал в своем вопросе: я не получаю никаких сообщений об ошибках в консоли или где-либо еще. О вашем коде: вы удаляете требуемую зависимость и требуете вызова, верно? Вечером попробую, но не уверен, что поможет. По крайней мере, я сейчас не понимаю, как это поможет. - person Sharikov Vladislav; 19.01.2016
comment
Как я уже сказал: у меня есть такой симптом: я не вижу никаких упоминаний AngularJS или моего исходного кода в выходном файле. Также о bootstrap.js. Я назвал основной файл конфигурации - bootstrap.js, поэтому data-main js/bootstrap.js - person Sharikov Vladislav; 19.01.2016
comment
Понятно для js/bootstrap.js, потому что в своем вопросе вы назвали это основной конфигурацией :) --- что касается настройки, это нужно, чтобы избежать переопределения вашей переменной angular. Когда вы определяете var angular = require('angular'). Я обновлю свой ответ, чтобы объяснить его лучше. - person Linh Pham; 19.01.2016
comment
Итак, вы просто что-то предлагаете, и это не решение моего основного ответа? Лучше опубликовать его, поскольку комментарий может быть. Во всяком случае, вы можете быть правы. Я все равно обновлю свой код. Я просто не понимаю, как это решит мою основную проблему: отсутствие AngularJS или исходного кода в выходном файле. - person Sharikov Vladislav; 19.01.2016
comment
Это возможное решение, но у меня нет вашего кода. Возможно, проблема связана с другими модулями. Поскольку у нас нет вывода ошибок, я не могу подтвердить это, но только вы, когда вы применяете мое предложение/решение. (Это просто вопрос, как это назвать) - person Linh Pham; 19.01.2016
comment
Опять таки. Симптом: AngularJS и исходный код не отображаются в выходном файле. Откуда grunt-contrib-requirejs знать, что копировать в вывод? Конфигурация задается в mainConfigFile. Я предоставил это: код первого блока. Я устанавливаю зависимости своего приложения: есть jquery и bootstrap (эти библиотеки появляются в конечном выходном файле), также у меня есть application и angular в качестве зависимостей. Эти библиотеки не отображаются в выходном файле. Почему? Потому что как я могу включить angular в свой app.js? Я даже не получаю код app.js на выходе. Как это может влиять? - person Sharikov Vladislav; 19.01.2016
comment
Возможно, нет вывода, потому что вы добавлены 'require' в define зависимости. Это нормально для необработанного запуска, но когда дело доходит до 'r.js', скорее всего, вы говорите r.js объединить requireJS в себя и вызвать конфликт. --- (Проверьте ответ еще раз, я обновил его с лучшими объяснениями) - person Linh Pham; 19.01.2016
comment
Отлично. Теперь действительно хорошее объяснение. Я попробую это как можно скорее. Все равно проголосовал. Спасибо. - person Sharikov Vladislav; 19.01.2016
comment
Ну мне не помогло. Я просто попытался удалить deps 1 на 1 и понял, что у меня проблема с зависимостью от boostrap. Я переименовал его в bootstrap-lib и получил готовый проект. Теперь у меня новый вызов :) 1,5 мб основного файла js - person Sharikov Vladislav; 19.01.2016
comment
Приятно слышать, что вы нашли решение :) --- Возможно, попробуйте использовать angularAMD с ngload! и какой-нибудь другой загрузкой по требованию для js-файла --- Мой main.js был почти такого же веса, но после некоторой настройки составляет 400 КБ+ для начальной страницы. - person Linh Pham; 20.01.2016
comment
Я решил это. Я начал использовать оптимизацию uglify2. Теперь у меня есть 350 КБ моего проекта src`s, libs и r.js lib. - person Sharikov Vladislav; 20.01.2016