Require.js Build Optimization Configuration

问题

I'm having a hard time getting the require.js build just right. I have a main module and then the other pages/modules are lazy loaded. When it's done compiling, I have to fix the compiled dist/main.js or the app will load the compiled main module from the dist folder, but other modules are still loaded from the app folder. I have to change the require.config baseurl from /app to /dist. What do I need to reconfigure to get it to build correctly?

Directory Structure

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

app/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']
        },{
            ...
        }
    ]
})

回答1:

Interesting, I've actually not used this scenario with RequireJS, however this structure would make sense for bundles/progressively loading files.

What I've done in the past is one of two things:

1) Use the existing /app directory for progressively loaded modules. /dist would only contain main.js/css or output the minified files to the root(if it's only 1-2 files)

2) Re-create the entire structure with only necessary files inside /dist. For example: /dist/index.html, /dist/app/modules/*, /dist/main.js would all exist. This way you can copy the entire /dist contents to any deployment package you use, vs cherry-picking which files you'll need on a production server.

Typically, I've found #2 is more common in my experience.

来源：https://stackoverflow.com/questions/28437563/require-js-build-optimization-configuration

标签

javascript

requirejs