Question

我正在尝试进行r.js优化。我有一个使用knockoutjs构建的示例项目https://github.com/noppanit/requirejs-optimization-example，我使用grunt-contrib-requirejs。一切正常。但我认为grunt-contrib-requirejs不会跟踪所有依赖项

这是我的Gruntfile.js

module.exports = function(grunt){
    grunt.initConfig({
        requirejs: {
            compile: {
                    options: {
                        baseUrl: "./js",
                    paths: {
                        'knockout': 'vendors/knockout/knockout-3.0.0'
                    },
                        mainConfigFile: "js/config.js",
                        name: "application",
                        out: "js/optimized.js"
                    }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-requirejs');

    grunt.registerTask('default', ['requirejs']);
};

以下是我如何添加优化文件

<!DOCTYPE>
<html>
<head>
</head>

<body>
    <div>
        Name: <input type="text" data-bind="value: name"/>
    </div>
    <div>
        Surname: <input type="text" data-bind="value: surname" />
    </div>

    <span data-bind="text: fullname"></span>
</body>

<script type="text/javascript" src="js/require.js" data-main="js/optimized">
</script>

</html>

这是我的config.js

require.config({
    baseUrl: './js',
    paths: {
        'jquery': 'vendors/jquery/jquery-1.11.0',
        'knockout': 'vendors/knockout/knockout-3.0.0',
        'main-viewmodel': 'viewmodels/main_viewmodel',
        'main-call': 'viewmodels/main_call',
    }

});

这是我的application.js

require(['config'], function() {
    require(['main-call','knockout']);
});

运行grunt

之后

这是我从optimized.js

获得的

require.config({baseUrl:"./js",paths:{jquery:"vendors/jquery/jquery-1.11.0",knockout:"vendors/knockout/knockout-3.0.0","main-viewmodel":"viewmodels/main_viewmodel","main-call":"viewmodels/main_call"}}),define("config",function(){}),require(["config"],function(){require(["main-call","knockout"])}),define("application",function(){});

看起来只是config.js和application.js的组合我希望所有的javascript文件包括requirejs和knockoutjs也将被包含在内。所以浏览器只需调用一次即可获得优化的javascript。

Answer 1

选项1：显式声明依赖项

require(['jquery', 'knockout', 'main-call', 'config'], function($, ko, mainCall) {
    //the code
});

选项2：将依赖项添加到包含列表

module.exports = function(grunt){
    grunt.initConfig({
        requirejs: {
            compile: {
                options: {
                    baseUrl: "./js",
                    paths: {
                        'knockout': 'vendors/knockout/knockout-3.0.0'
                    },
                    mainConfigFile: "js/config.js",
                    include: ['jquery', 'knockout', 'main-viewmodel', 'main-call'],
                    name: "application",
                    out: "js/optimized.js"
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-requirejs');

    grunt.registerTask('default', ['requirejs']);
};

Answer 2

我认为这是因为您正在优化配置文件，但配置文件没有任何依赖项。这是它优化的唯一文件。

通常在配置文件的末尾，您需要主文件（在您的情况下，主要调用，淘汰赛）。然后优化应该正确进行。 application.js未被读取

grunt-contrib-requirejs不跟踪所有依赖项

2 个答案: