{"id":13660835,"url":"https://github.com/sinclairzx81/typescript-bundle","last_synced_at":"2026-04-02T03:50:51.989Z","repository":{"id":38449765,"uuid":"71894897","full_name":"sinclairzx81/typescript-bundle","owner":"sinclairzx81","description":"A Bundling Tool for TypeScript","archived":false,"fork":false,"pushed_at":"2022-06-23T10:49:23.000Z","size":224,"stargazers_count":127,"open_issues_count":11,"forks_count":6,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-09T20:06:40.714Z","etag":null,"topics":["assets","bundle","tooling","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sinclairzx81.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-25T12:30:13.000Z","updated_at":"2024-11-18T02:26:16.000Z","dependencies_parsed_at":"2022-08-19T15:52:44.489Z","dependency_job_id":null,"html_url":"https://github.com/sinclairzx81/typescript-bundle","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinclairzx81%2Ftypescript-bundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinclairzx81%2Ftypescript-bundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinclairzx81%2Ftypescript-bundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinclairzx81%2Ftypescript-bundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sinclairzx81","download_url":"https://codeload.github.com/sinclairzx81/typescript-bundle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103872,"owners_count":21048245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["assets","bundle","tooling","typescript"],"created_at":"2024-08-02T05:01:26.331Z","updated_at":"2026-04-02T03:50:51.949Z","avatar_url":"https://github.com/sinclairzx81.png","language":"TypeScript","readme":"\n# TypeScript-Bundle\n\nA bundling tool for TypeScript.\n\n![logo](./docs/images/logo-small.png)\n\n[![NPM package](https://badge.fury.io/js/typescript-bundle.svg)](https://www.npmjs.com/package/typescript-bundle) [![Build Status](https://travis-ci.org/sinclairzx81/typescript-bundle.svg?branch=master)](https://travis-ci.org/sinclairzx81/typescript-bundle)\n\n```bash\n$ npm install typescript-bundle -g\n```\n```bash\n$ tsc-bundle ./index.ts\n```\n\n## Overview\n\nTypeScript-Bundle is a build tool for the TypeScript programming language. It layers the TypeScript compiler cli to enable direct bundling of modular TypeScript source code for immediate consumption in a browser.\n\nThis tool provides:\n\n- The ability to bundle directly from `.ts`, `.tsx` or `tsconfig.json`.\n- The ability to embed `text`, `json`, `base64` and `buffer` assets as modules.\n- Support for custom pre-processing pipelines.\n- Supports TypeScript compiler versions as low as 1.8.0.\n\nThis tool is offered as is for anyone who finds it useful.\n\n## Docs\n- [Options](#Options)\n- [Usage](#Usage)\n- [Assets](#Assets)\n- [ExportAs](#ExportAs)\n- [ImportAs](#ImportAs)\n- [EntryPoint](#EntryPoint)\n- [Transforms](#Transforms)\n- [Tasks](#Tasks)\n\n\u003ca name=\"Options\"\u003e\u003c/a\u003e\n## Options\n\n```\n$ tsc-bundle script.ts | script.tsx | tsconfig.json\n\n  Examples: tsc-bundle index.ts\n            tsc-bundle tsconfig.json\n            tsc-bundle script.ts --exportAs Foo\n            tsc-bundle index.ts --outFile bundle.js\n            tsc-bundle index.ts --transform script.js\n\n  Options:\n    --outFile         Outputs the bundle with the give filepath.\n    --target          Sets the ES Target for the bundle.\n    --exportAs        Exports bundle exports as a global variable.\n    --importAs        Imports global variable as a module (namespace).\n    --importAsDefault Imports global variable as a module (default).\n    --entryPoint      Overrides the default entry point for the bundle.\n    --transform       Applies a transform to the bundle.\n    --watch           Starts the compiler in watch mode.\n    --debug           Prints debug information.\n\n```\n\n\u003ca name=\"Usage\"\u003e\u003c/a\u003e\n## Usage\n\n### Bundle from source file\n\nPoint TypeScript-Bundle at a TypeScript source file to have it bundle that file and everything it imports. Will use the default compiler settings.\n\n```bash\n# output: ./script.js\n$ tsc-bundle ./script.ts\n\n# output: ./bundle.js\n$ tsc-bundle ./script.ts --outFile ./bundle.js\n```\n### Bundle from tsconfig.json\n\nPoint TypeScript-Bundle at a `tsconfig.json` to have it use the compiler settings within.\n\n```json\n{\n  \"compilerOptions\": {\n    \"strict\": true,\n    \"target\": \"esnext\",\n    \"lib\": [\"dom\", \"esnext\"],\n  },\n  \"files\": [\"script.ts\"]\n}\n\n```\n```bash\n$ tsc-bundle ./src/tsconfig.json\n\n# output: ./script.js\n```\n```bash\n$ tsc-bundle ./src/tsconfig.json --outFile ./bundle.js\n\n# output: ./bundle.js\n```\n\u003ca name=\"Assets\"\u003e\u003c/a\u003e\n## Assets\n##### Supported for TypeScript compiler versions 2.2.0 and higher.\n```typescript\nimport Content from 'text!./file.txt'\n```\nTypeScript-Bundle automatically bundles files with a special import scheme similar to WebPack's [ts-loader](https://github.com/TypeStrong/ts-loader). It supports `text`, `json`, `base64`, `buffer` and `css` directives that inform the bundler how to embed the asset.\n\n```typescript\nimport Text   from 'text!./file.txt'    // as 'string'\nimport Base64 from 'base64!./image.png' // as 'string | base64 encoded'\nimport Obj    from 'json!./file.json'   // as 'any'\nimport Buf    from 'buffer!./file.dat'  // as 'Uint8Array'\nimport Css    from 'css!./file.css'     // as 'string | @import concat'\n```\n\n### Declarations\n\nTo import assets without compiler warnings, TypeScript requires you define an additional declaration file `.d.ts` that describes the `file extension` to `type` mappings. The following is an example of such a declaration.\n```typescript\ndeclare module '*.txt' {\n const value: string\n  export default value\n}\ndeclare module '*.json' {\n  const value: any\n  export default value\n}\ndeclare module '*.b64' {\n const value: string\n  export default value\n}\ndeclare module '*.buf' {\n const value: Uint8Array\n  export default value\n}\ndeclare module '*.css' {\n const value: string\n  export default value\n}\n```\nYou can either add this declaration to your `tsconfig.json` or as a `/// \u003creference path='extensions.d.ts' /\u003e` directive if bundling from script.\n\n\u003ca name=\"ExportAs\"\u003e\u003c/a\u003e\n## ExportAs\n```\n--exportAs GLOBAL\n```\nAssigns a global variable name to the bundle.\n\n### Example\n\n```TypeScript\n// script.ts\n\nexport function add(a: number, b: number) { return a + b }\n```\n```bash\n$ tsc-bundle script.ts --exportAs Foo\n```\n```javascript\nvar Foo = (function() {  /* bundled code here */  })()\n```\nNow available to the page.\n```html\n\u003cscript src='./script.js'\u003e\u003c/script\u003e\n\n\u003cscript\u003e console.log(Foo.add(10, 20)) \u003c/script\u003e\n```\n### CommonJS\n\nIf you are bundling for nodejs, you can pass `--exportAs commonjs` that will make the bundle a nodejs module. Useful for keeping the internals of the bundle private while exposing a surface level API.\n\n```bash\n$ tsc-bundle ./script.ts --exportAs commonjs\n```\n```javascript\nmodule.exports = (function() {  /* bundled code here */  })()\n```\n```javascript\n// node: app.js\nconst Foo = require('./script')\n```\n\n\u003ca name=\"ImportAs\"\u003e\u003c/a\u003e\n## ImportAs\n```\n--importAs GLOBAL=module\n\n--importAsDefault GLOBAL=module\n```\nAdds global variables (such as those added to a web page when loading scripts via CDN) as internal modules.\n\n### Import React\n```bash\n# install react declaration files.\n\n$ npm install @types/react\n$ npm install @types/react-dom\n```\n```TypeScript\n// index.ts\n\nimport * as React    from 'react'\nimport * as ReactDOM from 'react-dom'\n```\n```bash\n# bundle with --importAs. The convention is GLOBAL_NAME=MODULE_NAME.\n\n$ tsc-bundle index.ts --importAs React=react --importAs ReactDOM=react-dom\n```\n```html\n\u003c!-- adds global name React --\u003e\n\u003cscript src=\"./react.js\"\u003e\u003c/script\u003e\n\u003c!-- adds global name ReactDOM --\u003e\n\u003cscript src=\"./react-dom.js\"\u003e\u003c/script\u003e\n\u003c!-- the bundle --\u003e\n\u003cscript src=\"./index.js\"\u003e\u003c/script\u003e\n```\nIt is possible to import as many global names as necessary.\n\n### importAs vs importAsDefault\n\nTypeScript-Bundle provides two importAs schemes for importing global variables. The decision to select one over the other is purely down to the import semantics provided by `@types/*` declaration for that library.\n\n#### importAs\n```\n--importAs THREE=three\n```\n```typescript\nimport * as THREE from 'three'\n```\n#### importAsDefault\n```\n--importAsDefault THREE=three\n```\n```typescript\nimport THREE from 'three'\n```\nSelect the most appropriate based on the library you're importing.\n\n\u003ca name=\"EntryPoint\"\u003e\u003c/a\u003e\n## EntryPoint\n\n```\n--entryPoint index2\n```\n\nWill override the default entry point for the bundle. By default, the last module within the bundle is treated as the default entry point and will be evaluated first. If this is undesirable, the `--entryPoint` option allows for the selection of any other module located within the bundle to be evaluated first. Useful when compiling with `glob` patterns such as `\"include\": [ \"src/**/*\" ]`.\n\n\u003ca name=\"Transforms\"\u003e\u003c/a\u003e\n## Transforms\n```\n--transform ./preprocessor.js\n```\nAllows for custom preprocessing of the bundle.\n\n```javascript\n// ./preprocessor.js\n\n// run on typescript AMD output.\nmodule.exports.typescriptOutput = function(javascript_code) {\n  // apply transformations here.\n\n  return javascript_code\n}\n\n// run on typescript-bundle output.\nmodule.exports.bundleOutput = function(javascript_code) {\n  // apply transformations here.\n\n  return javascript_code\n}\n```\nMultiple preprocessing stages can be stacked if required.\n```\n$ tsc-bundle ./index.ts --transform ./a.js --transform ./b.js --transform ./c.js\n```\n\n\u003ca name=\"Tasks\"\u003e\u003c/a\u003e\n\n## Tasks\n\nThe following tasks are provided by this project.\n\n```bash\n$ npm run clean       # cleans this project.\n$ npm run amd-loaders # rebuilds es loader templates. \n$ npm run build       # builds the bundler.\n$ npm run pack        # packs the bundler.\n$ npm run spec        # builds and runs the spec project.\n$ npm run install-cli # installs the bundler cli globally.\n```\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinclairzx81%2Ftypescript-bundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsinclairzx81%2Ftypescript-bundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinclairzx81%2Ftypescript-bundle/lists"}