javascript - 用于多应用程序项目的 Grunt 和 requirejs 优化器

Question

我在让 Grunt 对具有以下结构的项目执行 requirejs 优化时遇到问题:

static/js
    |── apps
        |── app.js
        |── dash.js
        |── news.js
        ... (many more 'app' files)
    |── build
    |── collections
    |── libs
    |── models
    |── util
    |── views

static/js/apps/*.js 中的每一个都应该被编译为包含相关依赖项的static/js/build/*.js(例如。views/view1, libs/query 等)。

目前这是由一个基本的 bash 脚本执行的:

JS_ROOT="static/js"

for f in ${JS_ROOT}/apps/*
do
    FILE=$(basename -s .js ${f})
    pushd .
    cd ${JS_ROOT} && r.js -o baseUrl=. name=libs/require-min.js include=apps/${FILE} out=build/${FILE}.js
    popd
done

我正在尝试转向基于 Grunt 的优化，在 Grunt.js 中包含以下内容:

requirejs: {
    compile: {
        options: {
            appDir: 'static/js/',
            baseUrl: './apps/',
            dir: 'static/js/build/',
            modules: [
                {
                    name: 'app',
                }
            ]
        }
    }
}

运行产生如下错误:

>> Tracing dependencies for: app
>> Error: ENOENT, no such file or directory
>> 'static/js/build/apps/libs/jquery.js'
>> In module tree:
>>     app

我可以清楚地看到问题是什么，但我无法弄清楚如何指示每个 static/js/apps/*.js 文件中的依赖项都在 static/js/ 不是 static/js/build

除此之外，我假设包含 name: 'app' 的 modules block 应该输出编译后的文件 static/js/build/app.js 来自 static/js/apps/app.js 的内容。

如果不为 static/js/apps 中的每个文件创建额外的 module block ，我如何才能将每个文件编译成它们相关的 static/js/build/*.js 文件？

更新 1

因此，我的 Gruntfile 中的以下内容将 static/js/apps/app.js 成功编译为 static/js/build/app.js:

requirejs: {
    compile: {
        options: {
            baseUrl: 'static/js/',
            include: './apps/app.js',
            out: 'static/js/build/app.js',
        }
    }
}

下一步是将 static/js/apps/*.js 编译成 static/js/build/*.js 而不必单独定义每个.. .

更新 2

将上面的修改为:

requirejs: {
    compile: {
        options: {
            baseUrl: '../',
            include: './apps/<%= appFile %>',
            out: 'static/js/build/<%= appFile %>',
        }
    }
}

并创建任务:

grunt.registerTask('buildrjs', function() {
    var dir='static/js/apps/';
    grunt.file.setBase(dir);
    var files = grunt.file.expand(['*.js']);
    files.forEach(function(filename) {
        grunt.log.write('Compiling '+filename+'\n');
        grunt.config.set('appFile', filename);
        grunt.task.run('requirejs:compile');
    });
});

几乎让我找到了解决方案。这些任务遍历 static/js/apps/ 中的每个文件，并将文件名传递给 grunt.config.set('appFile', filename);。任务输出 Compiling app.js Compiling news.js... 等，但是之后实际的 requirejs:compile 任务在最后一个文件上运行static/js/apps/ 目录，而不是每个单独的文件。异步问题？

Answer 1

已解决，通过将多组选项传递给 requirejs 任务，感谢 this article对于我需要的最终指示:

module.exports = function(grunt) {
    var files = grunt.file.expand('static/js/apps/*.js');
    var requirejsOptions = {};

    files.forEach(function(file) {
        var filename = file.split('/').pop();
        requirejsOptions[filename] = {
            options: {
                baseUrl: 'static/js/',
                include: './apps/'+filename,
                out: 'static/js/build/'+filename
            }
        };
    });

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        requirejs: requirejsOptions,
    });
};

然后 ['requirejs'] 任务可以正常运行，并将根据每个 选项输出适当的编译 .js 文件:{} block 在 requirejsOptions 中指定，例如:

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