Skip to content

Support for outputting to System.register format. #8833

@internettrans

Description

@internettrans

Feature request

It would be great to be able to change webpack's output.libraryTarget to system so that it is compiled to System.register format. See related #2810 from a couple years ago.

What is the expected behavior?

// webpack.config.js
module.exports = {
  entry: 'entry.js',
  output: {
    libraryTarget: 'system',
  },
}
// entry.js
console.log('hi')
// output bundle
System.register([], function(_export, _context) {
  return {
    setters: [],
    execute: function() {
      console.log('hi')
    }
  }
})

What is motivation or use case for adding/changing the behavior?
For projects that use SystemJS as their in-browser module loader, it's desireable to be able to System.import('/path-to-webpack-bundle.js') as a way to dynamically load bundles. Currently, this can only be done by changing webpack's libraryTarget to amd and then using the amd extra for SystemJS.

How should this be implemented in your opinion?
From the user's perspective, this should be implemented via output.libraryTarget. Places I would start with the webpack implementation: LibraryTemplatePlugin and ExternalsPlugin.

The most ambiguous part of the implementation is how to do code splits. For that, I welcome thoughts/advice/feedback. I think a good place to start would be rollup's implementation of code splitting with system format. Meaning that a dynamic import() would turn into a _context.import().

Are you willing to work on this yourself?
Yep I'm happy to work on this. Plan on digging into this tonight a bit to get my feet wet. It was previously expressed in #2810 that this would be a good feature to have, but if anyone disagrees please let me know before I get too far in my implementation :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions