javascript - R.js 优化器排除 Angular 库

标签 javascript angularjs requirejs gruntjs

我在使用 r.js 优化器来优化 Angular 项目时遇到问题。

我正在尝试使用 grunt-requirejs 进行优化,它工作得很好,直到我尝试从构建中排除 Angular 。然后我在 Angular route 收到一个错误,表示 Angular 未定义。我想这样做,这样我就可以从 CDN 加载 Angular,但在应用程序中包含 Angular-route。

为什么 Angular-Route 不等待 Angular 加载?

我知道 Angular 已加载,但有谁知道为什么 Angular 路线在此之前运行,以及如何修复它?

应用程序

define(['angular', ...], function(angular){
...
});

public/js/requirejs-config.js:

require.config({
  shim: {
    angular: {
      exports: 'angular'
    },
    'angular-route': [
      'angular'
    ]
  },
  paths: {
    angular: '../../bower_components/angular/angular',
    'angular-route': '../../bower_components/angular-route/angular-route'
  }
});

require(['app']);

Gruntfile:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        requirejs: {
            compile: {
                options: {
                    baseUrl: "public/js",
                    name: "app",
                    mainConfigFile: "public/js/requirejs-config.js",
                    out: "public/js/combined.js",
                    paths: {
                        angular: "empty:" //without this it works fine
                    },
                    optimize: "none"
                }
            }
        }
    });


    grunt.loadNpmTasks('grunt-bower-requirejs');
    grunt.registerTask('default', ['requirejs']);

};

最佳答案

自己解决了。

我需要使用wrapShim并使用deps而不是数组指定依赖项。

应用程序

define(['angular', ...], function(angular){
...
});

public/js/requirejs-config.js:

require.config({
  shim: {
    angular: {
      exports: 'angular'
    },
    'angular-route': {
      deps: ['angular']
    }
  },
  paths: {
    angular: '../../bower_components/angular/angular',
    'angular-route': '../../bower_components/angular-route/angular-route'
  }
});

require(['app']);

Gruntfile:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        requirejs: {
            compile: {
                options: {
                    baseUrl: "public/js",
                    name: "app",
                    mainConfigFile: "public/js/requirejs-config.js",
                    out: "public/js/combined.js",
                    paths: {
                        angular: "empty:" //without this it works fine
                    },
                    wrapShim: true,
                    optimize: "none"
                }
            }
        }
    });


    grunt.loadNpmTasks('grunt-bower-requirejs');
    grunt.registerTask('default', ['requirejs']);

};

关于javascript - R.js 优化器排除 Angular 库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25058534/

相关文章:

javascript - 将无法进行 json 字符串化的对象存储在 localStorage 中?

javascript - 使用本地存储更改按钮和面板中的文本

javascript - 使用 RequireJS 从数组中动态加载模块

javascript - 双击 amCharts 时取消缩放?

javascript - 使用 Angular 和 ng-repeat 向 HTML DIV 添加属性

javascript - AngularJS $location.path 循环回根

javascript - Angular : can a controller watch server properties?

ruby-on-rails - Rails 3.2 Assets 管道和 RequireJS

javascript - 在Ember CLI构建的Ember JS中,如何调用不同 Controller 上的方法?

javascript - 如何在javascript中对最近日期的对象数组进行排序