Sitelet https://web.archive.org/web/20240219133147/https://github.com/evanw/esbuild/pull/513
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce UMD as a new output format #513

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Conversation

prantlf
Copy link

@prantlf prantlf commented Nov 9, 2020 •

Attempts to fix #507.

--format=...  Output format (iife | cjs | umd | esm, no default
              when not bundling, otherwise default is iife when
              platform is browser and cjs when platform is node)

UMD format is similar to the IIFE format. Just the module wrapper and setting
the global variable differs. For example:

// IIFE
var moduleName = (() => {
  ... bundled code ...
  return exports;
})();

// UMD
(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(factory);
  } else if (typeof module === 'object' && module.exports) {
    module.exports = factory();
  } else {
    root.moduleName = factory();
  }
}(typeof self !== 'undefined' ? self : this, () => {
  ... bundled code ...
  return exports;
}));

The module contents is generated with the help of the CJS wrapper, like IIFE.

This change supports only building of standalone applications or libraries. All
dependencies have to be included inside the output bundle or loaded by global
variables. Referring to external dependencies using AMD or CJS is not supported. Internal dependencies can be referred to according to input module formats supported by esbuild

    --format=...  Output format (iife | cjs | umd | esm, no default
                  when not bundling, otherwise default is iife when
                  platform is browser and cjs when platform is node)

UMD format is similar to the IIFE format. Just the module wrapper and setting
the global variable differs. For example:

    // IIFE
    let moduleName = (() => {
      ... bundled code ...
      return exports;
    })();

    // UMD
    (function(root, factory) {
      if (typeof define === 'function' && define.amd) {
        define(factory);
      } else if (typeof module === 'object' && module.exports) {
        module.exports = factory();
      } else {
        root.moduleName = factory();
      }
    }(typeof self !== 'undefined' ? self : this, () => {
      ... bundled code ...
      return exports;
    }));

The module contents is generated with the help of the CJS wrapper, like IIFE.

This change supports only building of standalone applications or libraries. All
dependencies have to be included inside the output bundle or loaded by global
variables. Referring to external dependencies using AMD or CJS is not supported.
Copy link
Contributor

@jridgewell jridgewell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall this looks good to me, though I'd love to see external module support. @prantlf, are you interested in resolving the merge conflicts? If not, I could open a new PR with your changes and the resolution commit.

@@ -4044,6 +4088,44 @@ func (c *linkerContext) generateGlobalNamePrefix() string {
return text
}

func generateModuleNameAssignment(options *config.Options) string {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we expand this to the iife format, too?

@imbhargav5
Copy link

Would be super cool to see this merged. Thanks for your work on this PR @prantlf ! 🙇🏽

@cloverhearts
Copy link

oh my god, i want this

@langhuihui
Copy link

i want this too

@WNemencha
Copy link

WNemencha commented Jun 19, 2022 •

Would be very useful to me too, what is blocking this to get merged?

EDIT: Definitely would like to get this merged, but in the meantime i used babel + babel-plugin-transform-umd as a post-processing phase after esbuild.

EDIT2: In case anyone is interested in how to do that (⚠️ not super clean code ahead, need to refactor/test/document it yet, but it works in a stable way anyway):

@Vanilagy
Copy link

Vanilagy commented Nov 6, 2022

Go for it bois

@klarstrup
Copy link

lesss goooo

@mlshv
Copy link

mlshv commented Jun 5, 2023

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature] UMD bundle support
10 participants