Angularjs 使用 requirejs 优化器优化后找不到模块

Question

我在这个提交中有这个 repo angularseed：a9ad4568bd8534b888ae5cb3bf1a7f92f66d633d（只是学习工具和库）。也许有人可以帮助我。

我遇到的问题是当我尝试使用 requirejs 的优化器优化我的代码时。我正在使用 g运行t-contrib-requirejs。

要查看问题，您必须克隆存储库。

Nodejs 是必须的。

https://github.com/neonds/angularseed.git
cd angularseed
npm run configure //to download deps
npm run dev //then open http://localhost:9000
npm run prod

当我运行 prod 脚本时，似乎 ngRouter 没有正确加载。有人可以帮我找出问题吗？

Error log in Console

G运行t文件：

module.exports = function(grunt) {
  'use strict';

    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-requirejs');



 grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),

        project: {
            src: 'src',
            vendor: 'bower_components',
            build: 'build',
            dist: 'dist',
        },

        clean: {
            dist: '<%= project.dist %>',
            build: '<%= project.build %>'
        },

        jshint: {
            all: ['Gruntfile.js', '<%= project.src %>/scripts/**/*.js']
        },

        copy: {
            vendor: {
                files: [
                    {expand: true, cwd: '<%= project.vendor %>/angular/', src: ['angular.min.js', 'angular.min.js.map'], dest: '<%= project.build %>/assets/vendor/js'},
                    {expand: true, cwd: '<%= project.vendor %>/angular-route/', src: ['angular-route.min.js', 'angular-route.min.js.map'], dest: '<%= project.build %>/assets/vendor/js'},
                    {expand: true, cwd: '<%= project.vendor %>/requirejs/', src: 'require.js', dest: '<%= project.build %>/assets/vendor/js'},
                    {expand: true, cwd: '<%= project.vendor %>/jquery/dist', src: 'jquery.min.js', dest: '<%= project.build %>/assets/vendor/js'},
                    {expand: true, cwd: '<%= project.vendor %>/bootstrap/dist/', src: ['*/**.min.js', '*/**.min.js.map'], dest: '<%= project.build %>/assets/vendor/bootstrap'},
                    {expand: true, cwd: '<%= project.vendor %>/bootstrap/dist/', src: ['*/**.min.css', '*/**.min.css.map'], dest: '<%= project.build %>/assets/vendor/bootstrap'},
                    {expand: true, cwd: '<%= project.vendor %>/bootstrap/dist/fonts', src: '*', dest: '<%= project.build %>/assets/vendor/bootstrap/fonts'},
                    {expand: true, cwd: '<%= project.vendor %>/components-font-awesome/', src: ['css/*', 'fonts/*'], dest: '<%= project.build %>/assets/vendor/components-font-awesome'},
                ],
            },
            scripts: {
                files: [
                    {expand: true, cwd: '<%= project.src %>/', src: 'index.html', dest: '<%= project.build %>/'},
                    {expand: true, cwd: '<%= project.src %>/../', src: 'favicon.ico', dest: '<%= project.build %>/'},
                    {expand: true, cwd: '<%= project.src %>/scripts', src: ['**/*.js'], dest: '<%= project.build %>/assets/js'},
                    {flatten: true, expand: true, cwd: '<%= project.src %>/scripts', src: '**/*.html', dest: '<%= project.build %>/',  filter: 'isFile'},
                ],
            }

        },

        concat: {
            options: {
              separator: '\n\n',
            },

            build_css: {
                src: [
                '<%= project.src %>/**/*.css'
                ],

                dest: '<%= project.build %>/assets/css/styles.css'
            },
        },

        connect: {
                sever: {
                    options: {
                        hostname: 'localhost',
                        port: 9000,
                        base: 'build/',
                        livereload: 35729
                    }
                }
        },
        watch: {
            options: {
                livereload: true,
                dateFormat: function(time) {
                    grunt.log.writeln('The watch finished in ' + time + 'ms at' + (new Date()).toString());
                    grunt.log.writeln('Waiting for more changes...');
                }
            },
            scripts: {
                files: '<%= project.src %>/**/*.js',
                tasks: ['jshint','copy:scripts'],
            },
            styles: {
                files: '<%= project.src %>/**/*.css',
                tasks: ['concat:build_css'],
            }
        },


        requirejs: {
            compile: {
                options: {
                    baseUrl: "./build/assets/js",
                    out: '<%= project.dist %>/<%= pkg.name %>-<%= pkg.version %>.min.js',
                    mainConfigFile:'./build/assets/js/main.js',
                    name: 'main'

                },
                preserveLicenseComments : false,
                optimize: "uglify"
            }
        }

        

 });


 grunt.registerTask('build', function(){
        grunt.task.run('clean');
        grunt.task.run('jshint');
        grunt.task.run('copy:vendor');
  grunt.task.run('copy:scripts');
        grunt.task.run('concat:build_css');
        grunt.task.run('connect');
        grunt.task.run('watch');
 });

    grunt.registerTask('dist', function () {
        grunt.task.run('clean');
        grunt.task.run('jshint');
        grunt.task.run('copy:vendor');
        grunt.task.run('copy:scripts');
        grunt.task.run('concat:build_css');
        grunt.task.run('requirejs');
    });
 };

谢谢！！

Answer 1

Angular 失败是因为它在您的函数上调用 .toString() 以确定需要注入哪些参数。当您缩小脚本时，这当然会立即中断。例如，而不是这个：

appModule.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      template: '<home></home>'
    });
})

这会被缩小为类似的东西：

appModule.config(function(a){a.when('/',{template:'<home></home>'})})

由于 Angular 考虑不周，所以它不知道上面缩小脚本中的 a 应该是 $routeProvider 所以当出现这个时它就惨败了.

您需要这样做：

appModule.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/', {
      template: '<home></home>'
    });
}])

您可以在此处查看为什么 Angular 缩小后如此容易损坏的更多解释：https://scotch.io/tutorials/declaring-angularjs-modules-for-minification

Angularjs 使用 requirejs 优化器优化后找不到模块

Angularjs can't find module after optmize with requirejs optimizer

javascript

node.js

requirejs

angularjs

gruntjs