1

我有我的应用程序的 src。我使用 AngularJS。我使用 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;
});

body我在标签末尾添加了主要的 RequireJS 配置文件：

<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

我没有优化，所以我在输出文件中得到了大约 11k 行代码。

就像我说的。主要问题是：输出文件中没有 AngularJS 代码和应用程​​序代码。

为什么？我正确设置了 mainConfigFile。问题出在 RequireJS 配置文件中？但是一切都很好，当我在 src 上运行我的应用程序时。

4

1 回答 1

1

如果你能提供你得到的准确错误输出会更好。以及你在哪里得到它（在构建过程中从浏览器的控制台或终端）

现在，我将建议一些可能对您的情况有所帮助的调整。

angular: {
    exports : 'angular'
}

在这里，您已经导出angular.js到全局局部变量（在 everyrequire和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'indefine块和angular局部变量的解释。

于 2016-01-19T08:59:17.703 回答