优化RequireJS前端应用程序

Question

我正在学习使用r.js来优化/缩小/丑化前端应用程序。到目前为止，它真的很酷，很有前途，但我正在努力弄清楚如何做一件事。我希望能够将一个目录中的所有文件(js，css，html)连接成一个优化的文件，我可以把这个文件放在前端的脚本标签中。

到目前为止，我只成功地将我的requirejs.config文件中列出的JS文件放入一个优化文件中。

但我想知道是否有一种方法可以连接比requirejs.config文件中列出的文件更多的文件-以下是我的requirejs.config文件以供参考：

requirejs.config({
    enforceDefine: false,
    waitSeconds: 8,
    baseUrl: '/static',
    paths: {
        'async': 'vendor/async',
        'jquery': 'vendor/jquery',
        'ejs': 'vendor/ejs',
        'text': 'vendor/text',
        'form2js': 'vendor/form2js',
        'underscore': 'vendor/underscore',
        'ijson':'vendor/idempotent-json',
        'backbone': 'vendor/backbone',
        'bootstrap': 'vendor/bootstrap',
        'handlebars': 'vendor/handlebars',
        'backbone-validation': 'vendor/backbone-validation-amd'
        //'socketio': 'https://cdn.socket.io/socket.io-1.3.5'
    },

    'shim': {
        'underscore': {
            'exports': '_'
        },
        'backbone': {
            'deps': ['jquery', 'underscore'],
            'exports': 'Backbone'
        },
        'handlebars': {
            'exports': 'Handlebars'
        },
        ejs: {
            exports: "ejs"
        }
    }
});

我的build.js文件如下所示：

({
    "baseUrl": "./public/static",
    "name": "app/js/main",
    "mainConfigFile": "./public/static/app/js/main.js",
    "out": "./public/static/app/js/optimized.js"
})

我尝试过的另一个build.js文件如下所示：

({
    "baseUrl": "./public/static",
    "dir": "./js-built",
    "mainConfigFile": "./public/static/app/js/main.js",
    //"optimize": 'none',

    "modules": [
        {
            name: "app/js/main",

            include: [
                "text"
            ],

            excludeShallow: [

            ]
        }


    ],
})

正如我所说的，build.js文件的第一个版本将requirejs.config中列出的所有JS文件连接到一个文件中(在我的示例中是optimized.js)。build.js文件的第二个版本复制了整个目录并缩小了所有文件，但保留了目录结构。

我想做的是把第一个和第二个结合起来。缩小目录中的所有文件，但以某种方式将它们连接到一个文件中。

这个是可能的吗？

我对如何做到这一点的一个猜测是，简单地列出我想要在requirejs.config中连接的所有文件，然后使用我提到的第一个build.js文件。这是正确的吗？

Answer 1

不，你不能组合两个脚本，因为在第一个脚本中你只优化了一个文件(这就是为什么优化是创建一个单一的文件：'out‘参数)，而在第二个脚本是优化整个目录(这就是为什么你使用'dir’参数来复制所有优化过的资源)。实际上，在同一个脚本中同时使用'dir‘和'out’参数应该会在启动优化时产生错误。使用第二个脚本时，您将在js构建的目录中优化main.js，为什么不只使用那个目录呢？

此外，这些参数在脚本中也可能对您有用：optimizeCss: 'standard' (uglify css文件)，removeCombined: true (在优化期间删除已包含在其他文件中的文件)

有关更多信息，请查看this website。