[Feature Request] full support `UMD` module for `tsc`

[John0King]

Suggestion

🔍 Search Terms

• UMD output option for single file #6380
• umd module compiler option doesn't have a fallback for global namespace. #8436
• Completions are low-quality for UMD modules without typings #20565
• Error when augmenting UMD module #13565
• Proposal: Bundling TS module type definitions #4433

✅ Viability Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

ts is support UMD module , but not UMD bundle. Vue ,React and other package is using UMD and webpack to release their js base packages, but we come to typescript , you must need webpack and rewrite types for browse base code(sync load with <script> tag)

and follow feature to implement this goal：

• declaration merge eg. bundle declaration files
• entryfile in tsconfig.json
• umdModuleName in tsconfig.json , this will pack every exported variable in entryfile to this namespace
• dependency bundle and dependency exclude (preload dependency and self-contained dependency)
• umdBundle of boolean in tsconfig.json (outFile can do this)
• declaration for umdModuleName, ability to generate and also be used by typescript as well ( global variable access and type consume ) see code below

// lib.d.ts
export declare class Foo{
    sayHello():string;
    createNewFoo():Foo;
}
declare global
{
     declare let foo:Foo;
}
// main.ts  none module

foo.sayHellow

let myFoo:Foo = null ; // error, where is Foo class ?  import Foo from "lib" , will cause  exports.__esModule == true 
// and break `<script>` load in browse; <reference path />  won't load this type
if(true) // somcondition
{
    myFoo = foo.createNewFoo();
}

💻 Use Cases

generate a umd bundle and can be use either browse <script> and other loader (eg. webpack, amd,CommonJS)

[Dan503]

Yes please. I can't believe TypeScript is as big as it is and has no way to natively output a bundle that can run in a web browser.

I always have to try and use Browserify to convert the ts output into something the browser can understand.

[andrewbranch]

Non-goal 4:

Provide an end-to-end build pipeline. Instead, make the system extensible so that external tools can use the compiler for more complex build workflows.

[John0King]

@andrewbranch I know it meet some goal your team do not want to see, but this is almost everyone want to do when they come to typescript first time.
and also make typescript cli eg tsc is useful or not. there no need for tsc exists if everyone must using webpack(or other tools) to build their typescript project. but with this implemented, then tsc will be very usefull for at least 20% of project.
beside , you already have outFile configuration anyway.

Instead, make the system extensible so that external tools can use the compiler for more complex build workflows.

and this is not conflict for those reasons.

1. you can try some extensible pipeline like webpack with a "umd-loader", and allow sass-load, style-loader, image-loader configured in a pipeline.ts with piepline:<filename> in tsconfig.json
2. umd can be an build-in pipeline with the extensible pipleline

[curran]

Is there really no way to specify the name of a browser global to be introduced when the module=umd flag is given?

[RyanCavanaugh]

TypeScript's UMD output does not support creating a browser global. We recommend using an external bundler if this is a scenario for you.

[curran]

Got it. Thanks!

Using Rollup's UMD feature in conjunction with https://www.npmjs.com/package/rollup-plugin-typescript2 looks like a good approach.

[John0King]

I'm confused， it seems that ts team do not want people use the tsc command and suggest use webpack vite roll up esbuild instead.

[curran]

Indeed, I was hoping I could do something like tsc --module=umd moduleName=MyGlobal or something like that. It's confusing because "UMD" claims to be supported by tsc, but it's not actually UMD, it's more like CJS+AMD. I thought that the definition of the term UMD meant "universal" in that it also includes a browser build that introduces a browser global.