javascript - 为什么我的 AngularJS + RequireJS 应用程序不是通过 grunt-contrib-requirejs 构建的？

Question

我有我的应用程序的 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 上运行我的应用程序时，一切都很好。

Answer 1

如果您能提供准确的错误输出，那就更好了。以及您从哪里获得它(从浏览器的控制台或构建过程中的终端)

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

angular: {
    exports : 'angular'
}

这里您已经将 angular.js 导出到 global 局部变量(在每个 require 和 define block 内) )。

通过执行 var angular = require('angular');，您可能会异步重写 app.js 模块内的 angular 变量.

将 'require' 添加到 define block 中，因为 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 或拼写错误。

编辑在define block 中添加了对'require'的解释，以及Angular局部变量。