How to use systemjs - 10 common examples

function describeModule(moduleName, loadDeps, testFn) {
  const localSystem = new systemjs.constructor();
  localSystem.config({
    defaultJSExtensions: true,
    baseURL,
    meta: {
      '*': { format: cliqzConfig.format === 'common' ? 'cjs' : 'register' },
    },
  });

  // list names of all loaded modules so we can unload them after each test
  // check `unloadModules`
  const systemSet = localSystem.set;
  const systemImport = localSystem.import;

  let modules = {};

  localSystem.set = function (name) {

function describeModule(moduleName, loadDeps, testFn) {
  const localSystem = new systemjs.constructor();
  localSystem.config({
    defaultJSExtensions: true,
    baseURL,
    meta: {
      '*': { format: cliqzConfig.format === 'common' ? 'cjs' : 'register' },
    },
  });

  // list names of all loaded modules so we can unload them after each test
  // check `unloadModules`
  const systemSet = localSystem.set;
  const systemImport = localSystem.import;

  let modules = {};

  localSystem.set = function (name) {

// SYSTEM JS
var System = require('systemjs');
require('./build/server/environment');
require('./build/config');

System.import('server/index');

// @flow

import klaw from 'klaw';
import path from 'path';
import chalk from 'chalk';
import rfse from 'fs-extra';
import winston from 'winston';
import Promise from 'bluebird';
import Mustache from 'mustache';
import inquirer from 'inquirer';
import SystemJS from 'systemjs';

import utils from '../utils/utils';

const fse = Promise.promisifyAll(rfse);
SystemJS.config({
  transpiler: 'plugin-babel',
  map: {
    'plugin-babel': path.resolve(__dirname, '../../node_modules/systemjs-plugin-babel/plugin-babel.js'),
    'systemjs-babel-build': path.resolve(__dirname, '../../node_modules/systemjs-plugin-babel/systemjs-babel-browser.js'),
  },
});

/**
 * This class represents a template, which will be able to render to some output location.
 * All the data and render processes are stored in this instance.
 */
class Template {

  filters: Map boolean>;
  source: string;
  start: string;

constructor(option: IInitOption) {
    // 注册所有的 Vendors
    if (option.vendors) {
      option.vendors.forEach(vendor => {
        this.registerSystemMap(vendor);
      });
    }

    // 注册所有的应用
    option.apps.forEach(app => {
      this.registerSystemMap(app);
    });

    // Init systemJS
    SystemJS.config(this.systemConfig);

    // Mount CSS
    this.css.forEach(cssHref => {
      loadCSS(cssHref);
    });

    this.apps = option.apps;
    this.isRegistered = true;

    return this;
  }

constructor(option: IInitOption) {
    // 注册所有的 Vendors
    if (option.vendors) {
      option.vendors.forEach(vendor => {
        this.registerSystemMap(vendor);
      });
    }

    // 注册所有的应用
    option.apps.forEach(app => {
      this.registerSystemMap(app);
    });

    // Init systemJS
    SystemJS.config(this.systemConfig);

    // Mount CSS
    this.css.forEach(cssHref => {
      loadCSS(cssHref);
    });

    this.apps = option.apps;
    this.isRegistered = true;

    return this;
  }

const cssLoader = createCssLoader({
            runtime: this,
        });

        this.defaultDependencies = defaultDependencies;
        // this.defaultExtensions = defaultExtensions;
        this.esmLoader = createEsmCdnLoader({ cssLoader });
        this.localLoader = createLocalLoader({
            cssLoader,
            defaultExtensions,
            runtimeHost,
        });
        this.systemLoader = createSystemLoader();
        this.queue = Promise.resolve();
        // this.runtimeHost = runtimeHost;
        this.system = new SystemJS.constructor();
        // Hack to force system to never use node's require
        this.system._nodeRequire = null;
        this.localRoot = this.system.baseURL.replace(
            /^([a-zA-Z]+:\/\/)([^/]*)\/.*$/,
            '$1$2'
        );
        this.transpiler =
            transpiler === false
                ? null
                : transpiler ||
                  createTranspiler({
                      createRuntime,
                      runtime: this,
                      runtimeHost,
                      typescriptVersion: TYPESCRIPT_VERSION,
                  });

import impressionSrv from 'app/core/services/impression_srv';
import builtInPlugins from './built_in_plugins';
import * as d3 from 'd3';
import * as grafanaUI from '@grafana/ui';

// rxjs
import { Observable, Subject } from 'rxjs';

// add cache busting
const bust = `?_cache=${Date.now()}`;
function locate(load) {
  return load.address + bust;
}
System.registry.set('plugin-loader', System.newModule({ locate: locate }));

System.config({
  baseURL: 'public',
  defaultExtension: 'js',
  packages: {
    plugins: {
      defaultExtension: 'js',
    },
  },
  map: {
    text: 'vendor/plugin-text/text.js',
    css: 'vendor/plugin-css/css.js',
  },
  meta: {
    '/*': {
      esModule: true,
      authorization: true,
      loader: 'plugin-loader',

import * as ticks from 'app/core/utils/ticks';
import {impressions} from 'app/features/dashboard/impression_store';
import builtInPlugins from './built_in_plugins';
import d3 from 'vendor/d3/d3';

// rxjs
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';

// these imports add functions to Observable
import 'rxjs/add/observable/empty';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/combineAll';

System.config({
  baseURL: 'public',
  defaultExtension: 'js',
  packages: {
    'plugins': {
      defaultExtension: 'js'
    }
  },
  map: {
    text: 'vendor/plugin-text/text.js',
    css: 'vendor/plugin-css/css.js'
  },
  meta: {
    '*': {
      esModule: true,
      authorization: true,
    }

map: {
    text: 'vendor/plugin-text/text.js',
    css: 'vendor/plugin-css/css.js'
  },
  meta: {
    '*': {
      esModule: true,
      authorization: true,
    }
  }
});

// add cache busting
var systemLocate = System.locate;
System.cacheBust = '?bust=' + Date.now();
System.locate = function(load) {
  var System = this;
  return Promise.resolve(systemLocate.call(this, load)).then(function(address) {
    return address + System.cacheBust;
  });
};

function exposeToPlugin(name: string, component: any) {
  System.registerDynamic(name, [], true, function(require, exports, module) {
    module.exports = component;
  });
}

exposeToPlugin('lodash', _);
exposeToPlugin('moment', moment);
exposeToPlugin('jquery', jquery);
exposeToPlugin('angular', angular);