Требуется оптимизатор с angularjs

0

Я пытаюсь сделать пример приложения с помощью angularjs, ui-router и requirejs для lazyload моих контроллеров. Он работает хорошо на месте, но я хочу написать requirejs optimizer для производственной среды, пробовал использовать grunt: requirejs tool для этого, но он не работал для меня. Он даже не дает ошибку загрузки скрипта или что-то еще.

<--index.html--!>
<!DOCTYPE html>
<html style="overflow-x:hidden">
  <head>
  </head>

  <body class="no-padding">
    <div data-ui-view="header"></div>
    <div data-ui-view="module"></div>
    <script data-main="app/main" src="bower_components/requirejs/require.js"></script>
  </body>

</html>


//main.js
require.config({
    baseUrl: "",
    // Paths for just the core application and its controllers/factories/services
    paths: {
            "jquery": "bower_components/jquery/dist/jquery",
        "angular":                    "bower_components/angular/angular.min",
        "angular-ui-router":          "bower_components/angular-ui-router/release/angular-ui-router.min",
          "app":                        "app/app",
        "underscore":                 "node_modules/underscore/underscore-min",
    },


  shim: {
        //Tell requirejs to pipe in angular"s return variable as "angular"
    "angular": {
      exports: "angular"
    },
  },
    // Say we have a dep on App, so it gets loaded
  deps: ["app", 'lib']
});

//lib.js
define([
  'jquery',
  'underscore',
], function($){
});


//app.js
define([
  'angular',
  'angular-ui-router'
], function(){
  var app = angular.module('app', ['ui.router']);


  //lazy loading
  var loadController = function(path){
    return ['$q', function($q){
      var defered = $q.defer();
      require([path], function(){
        defered.resolve();
      });
      return defered.promise;
    }]
  };


  app.config(['$controllerProvider',  function($controllerProvider){
    app.registerController = $controllerProvider.register;
  }]);


  app.config(['$stateProvider',  function($stateProvider){
    //registering controller
    // defining states
    $stateProvider.state('app', {
      url: '/',
      views: {
        'header':{
          templateUrl:"<div>{{title}}</div>",
          controller:"appCtrl"
        },
        'module':{
          template:"<div>{{title}}</div>",
          controller:"homeCtrl"
        }
      },
      resolve: {
         loadApp: loadController('../app/controllers/header'),
         loadHome: loadController('../app/controllers/home')
      }
    });
  }]);
  angular.bootstrap(document, ['app']);
  return app;
});

//home.js

define(function(){
  angular.module('app').registerController('homeCtrl', ['$scope', '$state', function($scope,$state){
    $scope.title = 'CONTENT';
  }]);
});

//header.js
define(function(){
   angular.module('app').registerController('appCtrl', ['$scope', '$state', function($scope,$state){
     $scope.title = 'HEADER';
   }]);
});

Я использовал grunt: requirejs task для компиляции оптимизированного файла dist "main.js" и grunt copy для измененного каталога index.html внутри dist:

grunt: requirejs и измененный index.html ->

grunt.initConfig({
  //...
  requirejs: {
  compile: {
    options: {
      name: 'node_modules/almond/almond',
      mainConfigFile: 'app/main.js',
      out: 'dist/main_opt.js',
      baseUrl: './'
    }
  }
},
  //...
})

<--dist/index.html--!>
<!DOCTYPE html>
<html style="overflow-x:hidden">
  <head>
  </head>

  <body class="no-padding">
    <div data-ui-view="header"></div>
    <div data-ui-view="module"></div>
    <script src='bower_components/requirejs/require.js'></script>
<script>
        require.config({
            paths: {
                //Comment out this line to go back to loading
                //the non-optimized main.js source file.
                "main_opt": "dist/main_opt"
            }
        });
        require(["main_opt"]);
    </script>
  </body>

</html>

При загрузке dist/index.html это ничего не дает, ошибки в браузере, просто не работает, если это давало мне ошибку загрузки скрипта для контроллеров, это могло иметь какой-то смысл, но его нет. Полностью невежественный здесь..

Теги:
requirejs
lazy-loading
requirejs-optimizer

1 ответ

0

В файле main.js ничего не требуется. Вы должны потребовать хотя бы один из файлов, объявленных в путях. Сделайте это следующим образом:

require(['app'], function () {
    console.log('app required successfully');
});

Поместите эти строки кода в файл main.js. Надеюсь, это поможет найти ошибки:

requirejs.onError = function (err) {
    console.error('[require error] type: ', err.requireType, ' ,modules: ' + err.requireModules);
    throw err;
};
  • 0
    Большое спасибо за ваш ответ, @Majid Yaghouti, файл main.js работает нормально без какой-либо оптимизации, я пишу deps: ['app', 'lib'] которая загружает приложение и файл lib, а затем все остальное приложения для меня.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню