Questions tagged [umd]

Universal Module Definition (UMD) is an API for JavaScript modules that are capable of working in browsers, on the server, or elsewhere.

Universal Module Definition (UMD) is an API for JavaScript modules that are capable of working in browsers, on the server, or elsewhere.

The UMD pattern typically attempts to offer compatibility with the most popular script loaders of the day (RequireJS, CommonJS, and others). In many cases it uses AMD as a base, with special-casing added to handle CommonJS compatibility.

See the GitHub repo for more information.

170 questions
29
votes
1 answer

How are UMD and CommonJS (CJS) package folders different, and which should I use?

I installed reactjs and react-dom like this with package.json "dependencies": { "bootstrap": "^v4.1.1", "popper.js": "^1.14.3", "react": "^v16.4.1", "react-dom": "^16.4.1" } It downloaded react folder and…
kust kust
  • 431
  • 5
  • 10
29
votes
2 answers

How to bundle a library with webpack?

I want to create a frontend library. Therefore I want to use webpack. I especially like the css and image loader. However I can only require non-JS files if I am using webpack. Because I am building a library, I cannot garanty that the user of my…
Arwed Mett
  • 2,145
  • 1
  • 20
  • 26
24
votes
2 answers

Webpack 4 universal library target

According to the Webpack 4 documentation, if I specify libraryTarget: 'umd' it should result in the following output: (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') …
JeB
  • 9,395
  • 7
  • 50
  • 79
16
votes
4 answers

How to export a class instance in Typescript

Im authoring a TS library, and would like to export an instance of a class, I intend for it be used as singleton in the consuming application. Right now I have the following structure: index.ts export { Foo } from './my-class'; foo.ts export class…
mindparse
  • 7,083
  • 17
  • 64
  • 146
16
votes
2 answers

Building a JavaScript library, why use an IIFE this way?

I have noticed a lot of libraries use this style below to define their library. I also notice that the first self invoking function has something to do with Require.js or AMD systems, they always have factory as an argument, I will look more into…
Michael Joseph Aubry
  • 8,880
  • 13
  • 54
  • 110
12
votes
3 answers

Output a UMD module from dynamic sources with webpack

I have a project structure that contains a folder that I want to dynamically import into a UMD module when I build my webpack config and have each file be a submodule in the outputted build. For example, let's say my sources look…
Andy Baird
  • 5,649
  • 4
  • 38
  • 60
12
votes
2 answers

How to create TypeScript definition file (d.ts) for umd library

I am working on the library surveyjs It uses gulp+webpack to build umd bundle. I want to create the type definition bundle (or may be just multiple d.ts files) for using in typescript projects. I would like to have something like that: import * as…
Dmitry Kurmanov
  • 615
  • 2
  • 10
  • 16
11
votes
1 answer

How to create angular2 library which could be supported by all script loaders

How can I create a javascript file that contains an Angular 2 module that can be used by other applications, but is loaded at runtime directly from a centralized server and is NOT bundled into a specific application's code? Think of this as a CDN…
TwitchBronBron
  • 2,315
  • 1
  • 15
  • 38
10
votes
1 answer

WARNING: No name was provided for external module 'X' in output.globals – guessing 'X'

WARNING: No name was provided for external module 'moment' in output.globals – guessing 'momentImported' WARNING: No name was provided for external module 'odata-parser' in output.globals – guessing 'parser' I receive this message when I try to…
ROMAN
  • 1,331
  • 1
  • 9
  • 23
10
votes
1 answer

Parceljs build UMD

I am trying to build a module using the module-bundler ParcelJS. I would like this certain module to be import-friendly: it should be import friendly (ES6) It should be require friendly (Node) It should be script-src friendly (Browser) It should…
Verhulstd
  • 241
  • 2
  • 10
9
votes
2 answers

Angular 5 - instantiate a component from its name as a string

I know how to init components using ComponentFactoryResolver.resolveComponentFactory(AComponentType) but the method expects a Type, while in my code I have the name of the type as a string. In the Angular API is there a method to resolve by…
Cec
  • 1,376
  • 2
  • 14
  • 26
9
votes
1 answer

Importing UMD style module with ES6, Webpack, and Babel

I have found a few StackOverflow questions related to this but none that match nor fix my problem. I am writing a library in ES6 that is intended to be used in the browser and on the server. I have found a few HTTP request libraries that can be use…
Jake Runzer
  • 837
  • 3
  • 15
  • 32
9
votes
1 answer

JQuery library module export

I am trying to understand how jQuery sets itself up. Right at the beginning jQuery automatically calls a function, which exports a module. How does the setup work? Here some more detailed sub-questions which might answer the the more general…
Beginner
  • 4,477
  • 3
  • 25
  • 63
8
votes
4 answers

Import UMD Javascript Modules into Browser

Hi I am doing some research on RxJS. I am able to use the library simply by referencing it in my browser as such: It imports with the global object namespace…
Neil
  • 333
  • 2
  • 10
7
votes
2 answers

Webpack UMD: Critical dependency... cannot be statically extracted

I'm trying to build a umd library with webpack; regardless of what I do get a warning: WARNING in D:/Code/Node/sample.io/source/index.ts 3:24 Critical dependency: require function is used in a way in which dependencies cannot be statically…
Meirion Hughes
  • 21,021
  • 8
  • 65
  • 114
1
2 3
11 12