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导出到全局局部变量中（在每个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或拼写错误。

编辑在'require'块和define局部变量中添加了对angular的解释。

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

1 个答案: