【问题标题】:R.js optimizer excuding angular libraryR.js 优化器排除 Angular 库
【发布时间】:2014-07-31 12:10:26
【问题描述】:

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

我正在尝试使用 grunt-requirejs 进行优化,它可以完美运行,直到我尝试从构建中排除 angular。然后我在角度路线中收到一个错误,说角度未定义。我想这样做,以便我可以从 cdn 加载 angular,但在应用程序中包含 angular-route。

为什么 angular-route 不等到 angular 被加载?

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

应用

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']);

};

【问题讨论】:

    标签: javascript angularjs requirejs gruntjs


    【解决方案1】:

    自己解决了。

    我需要使用 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']);
    

    Grunt 文件:

    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']);
    
    };
    

    【讨论】:

    • 如果您有种子项目,您介意分享一下吗?或者任何博客文章可以做到这一点?我正在尝试进行此优化并坚持了一段时间。提前致谢
    • 很抱歉,我不再在同一家公司工作,也无法访问源代码。我希望你能设法解决它
    猜你喜欢
    • 1970-01-01
    • 2016-02-17
    • 1970-01-01
    • 2012-07-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-06-08
    相关资源
    最近更新 更多