Search code examples
systemjs

What is module Vs location Vs package in SystemJS configuration?


I'm little confused by various terminologies used in the SystemJS configuration. It talks about module, location, package etc...

Isn't module in JS is a single file, and package is a collection of modules or files? If so, how a module can be an alias to a package?

This is from the documentation page:

The map option is similar to paths, but acts very early in the normalization process. It allows you to map a module alias to a location or package:


Solution

  • Yes module is a single file, in javascript it's just the file name (with assumed .js extension) in quotes after from keyword in

    import ... from 'some-module';
    

    In SystemJS config file, paths and map can be used to define what actual file or URL that some-module refers to.

    packages in config file allow you to apply a set of configuration parameters (default extension, module format, custom loader etc) for all modules in or below particular location (the key in packages object).

    One of the settings in packages is main, which is similar to main in package.json in node (except that it's default value is empty, not index.js): it determines which file is loaded when the package location itself appears in from in import statement.

    So, I think "how a module can be an alias to a package?" question about this

    The map option is similar to paths, but acts very early in the normalization process. It allows you to map a module alias to a location or package:

    can be explained on this example:

    paths: {
        'npm:': 'node_modules/'
    },
    map: {
        'some-module': 'npm:some-module'
    },
    packages: {
        'some-module': {
            main: './index.js'
        }
    }
    

    when these map, packages and path settings are applied by SystemJS to

    import something from 'some-module';
    

    they will cause SystemJS to load a module from node_modules/some-module/index.js under baseURL.

    and

    import something from 'some-module/subcomponent';
    

    is mapped to node_modules/some-module/subcomponent.js.

    Note: this is based on my experience with SystemJS 0.19. I haven't tried 0.20 yet.