Question

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

目录结构

/dist

应用/ main.js

├── 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

应用/ build.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
});

Answer 1

有趣的是，我实际上并没有将此场景与RequireJS一起使用，但是这种结构对于捆绑/逐步加载文件是有意义的。

我过去所做的是两件事之一：

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

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

通常情况下，我发现＃2在我的经历中更为常见。

Require.js构建优化配置

1 个答案: