【问题标题】:Why does my grunt-contrib-requirejs does not optimize anything?为什么我的 grunt-contrib-requirejs 没有优化任何东西?
【发布时间】:2015-01-23 23:18:40
【问题描述】:

我正在尝试启动并运行 grunt-contrib-requirejs 任务。
作为 RequireJS 的新手并且从未使用过优化器/r.js,我真的很困惑如何让它工作。

首先,我建立了一个简单的目录结构,如下所示:

root
├── js
│   ├── helper
│   │   ├── a.js
│   │   ├── b.js
│   │   └── d-dep.js
│   └── main.js
├── node_modules
│   └── [dependencies from package.json]
├── Gruntfile.js
└── package.json

我已经在浏览器中测试过了,所有的依赖都在那里正确加载了。

我的 Gruntfile:

module.exports = function(grunt) {
  grunt.config.init({
    requirejs: {
      options: {
        baseUrl: 'js/',
        mainConfigFile: 'js/main.js',
        dir: 'target/',
        keepBuildDir: true
      }
    }
  });

  require('load-grunt-tasks')(grunt);
}

main.js:

require(["helper/a", "helper/b"], function(util) {
  console.log('main.js loaded');
});

a.js

console.log('a.js loaded');

b.js

define(['js/helper/b-dep.js'], function(bdep) {
  console.log('b.js loaded');
});

b-dep.js

console.log('b.js dependency loaded');

运行grunt requirejs 时,我收到Done, without errors. 消息,但看不到任何优化文件——我猜错误在Gruntfile 中,可能与路径有关。

你看到什么让你印象深刻的东西吗?为什么没有优化,虽然它说Done, without errors.

【问题讨论】:

    标签: javascript gruntjs requirejs grunt-contrib-requirejs


    【解决方案1】:

    您似乎没有告诉它优化某事。你应该设置一个name 选项来告诉它主模块是什么。此外,您在传递给 grunt 的配置中缺少一级配置。 options 对象必须在更具体的目标内,例如 compile

    requirejs: {
      compile: { // <<== nest the options in this.
        options: {
          baseUrl: 'js/',
          mainConfigFile: 'js/main.js',
          name : 'main', // <<=== add this
          dir: 'target/',
          keepBuildDir: true
        }
      }
    }
    

    设置mainConfigFile 是不够的,因为这只告诉优化器它应该从哪里获取运行时配置。它不会告诉优化器该文件是一个模块。请注意,name 中缺少 .js 扩展名并不是错误。您应该避免在模块名称中使用扩展名,除非有特定原因需要扩展名。而name 相对于baseUrl,所以这就是为什么它是'main' 而不是'js/main'

    【讨论】:

    • 谢谢!再次查找r.js 的可能选项后,我还注意到我缺少out,它指定了输出文件的名称。不幸的是,它仍然无法正常工作——我需要在我的main.js 中添加一些东西,或者更多配置吗?
    • 我最初的答案是通过观察您的代码得出的。我在这里复制了您的配置,并注意到另一个问题。我已经编辑了我的答案。
    • 哇,终于成功了!谢谢!我的模块树中仍然出现错误,但这对我来说是可以解决的——在我的头撞到墙上几个小时之后;-)
    【解决方案2】:

    检查我的配置,这是我用来创建一个名为all.js的文件

         requirejs : {
            dist : {
              options : {
                waitSeconds : 0,
                baseUrl : "./app/",
                name : 'assets/js/main',
                mainConfigFile: 'app/assets/js/main.js',
                out : "dist/assets/js/all.js",
                optimize : "uglify2",
                inlineText : true,
                findNestedDependencies : true,
                paths : {
                    requireLib : "assets/bower_components/requirejs/require",
                },
                include : [
                    "requireLib"
                ]
              }
            }
          }
    

    【讨论】:

    • 感谢您的回答,您能否发布相应的文件/文件夹结构?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-06-26
    • 2021-05-10
    • 1970-01-01
    相关资源
    最近更新 更多