5

ノード/グラントスタックで実行されるrequirejsを既存のプロジェクトに統合しようとしています。r.js オプティマイザーを使用してすべてを連結し、依存関係を処理してその魔法も実行したいと考えています。

r.js を取得して単一の .js ファイルを作成できましたが、エラーはありません...しかし、何も起こりません。コードにブレークポイントを設定しましたが、何も開始されません。アプリが実際に bootstrap.js ファイルを実行することはありません。私はbootstrap.jsを即時関数に入れようとしましたが、もちろんそれは実行されますが、依存関係はまだロードされていません(そうです)。ここで何が欠けていますか？

ファイル構造:

 app
 -> modules
 - -> common
 - - -> auth.js // contains an auth call that needs to return before I bootstrap angular
 -> app.js
 -> index.html
 config
 -> main.js
 node_modules
 vendor
 -> angular/jquery/require/domready/etc
 gruntfile.js

gruntfile requirejs タスク:

requirejs: {
  compile: {
    options: {
      name: 'app',
      out: 'build/js/app.js',
      baseUrl: 'app',
      mainConfigFile: 'config/main.js',
      optimize: "none"
    }
  }
},

main.js 構成:

require.config({
  paths: {
    'bootstrap':      '../app/bootstrap',
    'domReady':      '../vendor/requirejs-domready/domReady',
    'angular':       '../vendor/angular/angular',
    'jquery':        '../vendor/jquery/jquery.min',
    'app':           'app',
    'auth':          '../app/modules/common/auth',
    requireLib:      '../vendor/requirejs/require'
  },
  include: ['domReady', 'requireLib'],

  shim: {
    'angular': {
      exports: 'angular'
    }
  },

  // kick start application
  deps: ['bootstrap']
});

app.js:

define([
  'angular',
  'jquery',
], function (angular, $) {
  'use strict';

  $( "#container" ).css("visibility","visible");

  return angular.module('app');
});

ブートストラップ.js:

define([
    'require',
    'angular',
    'app',
    'jquery',
    'auth'
], function (require, angular, app, $, auth) {

    var Authentication = auth.getInstance();
    .. do auth stuff...

      if (Authentication.isAuthorized) {
        require(['domReady!'], function (document) {
          angular.bootstrap(document, ['app']);
       });
  }
);
4

1 に答える 1

3

アプリケーションへの主要なエントリ ポイントを設定する必要があります。ここでは になりapp.jsますが、そのファイルで行っていることは、そのファイルの依存関係を定義することだけであり、実際にコードをロードすることはありません。コードを次のように変更する必要があります。

require([
  'angular',
  'jquery',
], function (angular, $) {
  'use strict';

  $( "#container" ).css("visibility","visible");

  return angular.module('app');
});

define と require の違いの詳細については、このスレッドを参照してください。

于 2013-11-05T09:02:42.640 に答える