跳到主要内容
版本：4.x

The single-spa ecosystem

The single-spa ecosystem is quickly growing to support as many frameworks and build tools as possible.

Help for frameworks​

There is a growing number of projects that help you bootstrap, mount, and unmount your applications that are written with popular frameworks. Feel free to contribute to this list with your own project:

Webpack 2+​

With webpack 2+, we can take advantage of its support for code splitting with import() in order to easily lazy-load registered applications when they are needed. When registering registered applications from inside of your single spa config, try the following for your loading functions.

import {registerApplication} from 'single-spa';

registerApplication('app-name', () => import('./my-app.js'), activeWhen);

function activeWhen() {
    return window.location.pathname.indexOf('/my-app') === 0;
}

SystemJS​

Since SystemJS is a Promise-based loader, the way to lazy load your registered applications is straightforward:

import {registerApplication} from 'single-spa';

// Import the registered application with a SystemJS.import call
registerApplication('app-name-1', () => SystemJS.import('./my-app.js'), activeWhen);

// Alternatively, use the more out-of-date System.import (instead of SystemJS.import)
registerApplication('app-name-2', () => System.import('./my-other-app.js'), activeWhen);

function activeWhen() {
    return window.location.pathname.indexOf('/my-app') === 0;
}

Webpack 1​

With webpack 1, there is no support for Promise-based code splitting. Instead, we have to either wrap a require.ensure in a Promise, or just give up on lazy loading completely.

import {registerApplication} from 'single-spa';
import app1 from './app1'; // Not lazy loading with code splitting :(

// Giving up on lazy loading and code splitting :(
registerApplication('app-1', () => Promise.resolve(app1), activeWhen);

// Still doing code splitting! But verbose :(
registerApplication('app-2', app2InPromise, activeWhen);

/* Unfortunately, this logic cannot be abstracted into a generic
 * function that handles wrapping require.ensure in a promise for
 * any dynamically imported module. This is because webpack needs to
 * be able to statically analyze the code and find all of the require.ensure
 * calls at build-time, so you can't pass variables into require.ensure.
 */
function app2InPromise() {
    return new Promise((resolve, reject) => {
        require.ensure(['./app-2.js'], require => {
            try {
                resolve(require('./app-2.js'));
            } catch(err) {
                reject(err);
            }
        });
    });
}

function activeWhen() {
    return window.location.pathname.indexOf('/my-app') === 0;
}