Require.js构建优化配置

Question

我很难把require.js构建得恰到好处。我有一个主模块，然后其他的页面/模块是延迟加载的。编译完成后，我必须修复已编译的dist/main.js，否则应用程序将从dist文件夹加载已编译的main模块，但其他模块仍将从app文件夹加载。我必须将require.config基尔从/app更改为/dist。为了让它正确构建，我需要重新配置什么？

目录结构

├── app
│   ├── modules
│   │   ├── example_module
│   │   ╰── another_module
│   │       ├── AnotherController.js
│   │       ╰── AnotherView.stache
│   ├── main.js
│   ╰── build.js
├── dist
│   ├── modules
│   │   ├── example_module
│   │   ╰── another_module
│   │       ╰── AnotherController.js
│   ╰── main.js
├── content
│   ├── css
│   │   ╰── main.css
│   ├── sass
│   │   ├── table.scss
│   │   ├── type.scss
│   │   ├── form.scss
│   │   ╰── main.scss
│   ╰── img
├── lib
│   ├── bootstrap
│   ╰── canjs
├── bower.json
├── gulpfile.js
├── package.json
├── README.md
╰── index.html

应用程序/main.js

require.config({
    baseUrl: '/app', // must change this after compilation!
    paths: {
        'jquery':                   '../lib/jquery/dist/jquery.min',
        'jquery-easing':            '../lib/jquery-easing-original/jquery.easing.1.3.min',
        'jquery-throttle':          '../lib/jquery-throttle-debounce/jquery.ba-throttle-debounce.min',
        'jquery-inputmask':         '../lib/jquery.inputmask/dist/jquery.inputmask.bundle.min',
        'can':                      '../lib/canjs/amd/can',
        'bootstrap':                '../lib/bootstrap-sass-official/assets/javascripts/bootstrap',
        ...
    },
    shim: {
        'jquery-easing':            ['jquery'],
        'jquery-throttle':          ['jquery'],
        'bootstrap':                ['jquery']
        ...
    }
});

require([...], function (...) {
    // Init App
});

app/build.js

({
    appDir: '.',
    baseUrl: '.',
    dir: '../dist',
    mainConfigFile: 'main.js',
    preserveLicenseComments: false,
    modules: [
        {
            name: 'main',
            include: [
                 'modules/dashboard/DashboardController',
                 ...
            ]
        },{
            name: 'modules/example_module/ExampleController',
            exclude: ['main']
        },{
            name: 'modules/another_module/AnotherController',
            exclude: ['main']
        },{
            ...
        }
    ]
})

Answer 1

有趣的是，我实际上没有在RequireJS中使用这个场景，但是这种结构对于包/逐步加载文件是有意义的。

我过去做过的事情有两件：

1)使用现有的/app目录逐步加载模块。/dist将只包含main.js/css或将缩小后的文件输出到根(如果只有1-2个文件)

2)仅在/dist中使用必要的文件重新创建整个结构。例如: /dist/index.html、/dist/app/modules/*、/dist/main.js都将存在。通过这种方式，您可以将整个/dist内容复制到您使用的任何部署包中，而不是选择生产服务器上需要的文件。

通常，在我的经验中，我发现#2更常见。