问

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

晨风流云发布于 2023-02-10 14:21

我在让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

除此之外,我假设modules包含的块name: 'app'应该static/js/build/app.js从内容输出编译文件static/js/apps/app.js.

如果不module为每个文件创建一个附加块static/js/apps,如何将每个文件编译到相关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/目录中的最后一个文件而不是每个单独的文件上反复运行.一个异步问题？

1 个回答

解决了,通过将多组选项传递给requirejs任务,感谢本文提供了我需要的最终指针:

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']任务可以正常运行,并将根据options: {}指定的每个块输出相应的已编译.js文件requirejsOptions,例如:

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

2023-02-10 14:22 回答

daadhkiw_267

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签