{"id":13452592,"url":"https://github.com/s-panferov/awesome-typescript-loader","last_synced_at":"2026-01-11T02:50:43.151Z","repository":{"id":27594407,"uuid":"31077672","full_name":"s-panferov/awesome-typescript-loader","owner":"s-panferov","description":"Awesome TypeScript loader for webpack","archived":true,"fork":false,"pushed_at":"2019-10-31T17:37:45.000Z","size":1238,"stargazers_count":2351,"open_issues_count":233,"forks_count":181,"subscribers_count":28,"default_branch":"master","last_synced_at":"2024-10-29T20:25:59.150Z","etag":null,"topics":["loader","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/s-panferov.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-20T18:09:16.000Z","updated_at":"2024-10-25T16:03:11.000Z","dependencies_parsed_at":"2022-08-23T04:40:22.910Z","dependency_job_id":null,"html_url":"https://github.com/s-panferov/awesome-typescript-loader","commit_stats":null,"previous_names":[],"tags_count":174,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-panferov%2Fawesome-typescript-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-panferov%2Fawesome-typescript-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-panferov%2Fawesome-typescript-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-panferov%2Fawesome-typescript-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/s-panferov","download_url":"https://codeload.github.com/s-panferov/awesome-typescript-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234152718,"owners_count":18787675,"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":["loader","typescript","webpack"],"created_at":"2024-07-31T07:01:28.481Z","updated_at":"2026-01-11T02:50:43.098Z","avatar_url":"https://github.com/s-panferov.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Webpack plugins","webpack","TypeScript 工具/库/框架","typescript"],"sub_categories":["Brunch Plugins","构建工具"],"readme":"# TypeScript loader for Webpack\n\n[![Join the chat at https://gitter.im/s-panferov/awesome-typescript-loader](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/s-panferov/awesome-typescript-loader?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![Build Status](https://travis-ci.org/s-panferov/awesome-typescript-loader.svg?branch=master)](https://travis-ci.org/s-panferov/awesome-typescript-loader)\n\nSee also:\n\n1. [tsdoc.io](https://tsdoc.io) — TypeScript documentation portal (backed by [tygen](https://github.com/s-panferov/tygen)).\n\n## Installation\n\n```\nnpm install awesome-typescript-loader --save-dev\n```\n\n## Performance issues\n\nPlease note that ATL works **the same way as a TypeScript compiler** as much as possible. So please be careful with your `files`/`exclude`/`include` sections.\n\n**ADVICE**: Turn on `useCache` option.\n\n**ADVICE**: Typically you want your `files` section to include only entry points.\n\n**ADVICE**: The loader works faster if you use `isolatedModules` or `forceIsolatedModules` options.\n\n**ADVICE**: The loader works faster if you will use `reportFiles` to restrict\nchecking scope.\n\n**ADVICE**: Use the loader together with [hard-source-webpack-plugin](https://github.com/mzgoddard/hard-source-webpack-plugin)\n\nThe world is changing, other solutions are evolving and ATL may work **slower**\nfor [some workloads](https://github.com/s-panferov/awesome-typescript-loader/issues/497). Feel free to try [`ts-loader`](https://github.com/TypeStrong/ts-loader) with [`HappyPack` ](https://github.com/amireh/happypack) or [`thread-loader`](https://webpack.js.org/loaders/thread-loader/) and [hard-source-webpack-plugin](https://github.com/mzgoddard/hard-source-webpack-plugin).\n\n## Differences between [`ts-loader`](https://github.com/TypeStrong/ts-loader)\n\n`awesome-typescript-loader` loader was created mostly to speed-up compilation in my own projects.\nSome of them are quite big and I wanted to have full control on how my files are compiled. There are two major points:\n\n1) atl has first-class integration with Babel and enables caching possibilities. This can be useful for those who use Typescript with Babel.\nWhen `useBabel` and `useCache` flags are enabled, typescript's emit will be transpiled with Babel and cached.\nSo next time if source file (+environment) has the same checksum we can totally skip typescript's and babel's transpiling.\nThis significantly reduces build time in this scenario.\n\n2) atl is able to fork type-checker and emitter to a separate process, which also speeds-up some development scenarios (e.g. react with react-hot-loader)\nSo your webpack compilation will end earlier and you can explore compiled version in your browser while your files are typechecked.\n\n## Configuration\n\n1. Add `.ts` as a resolvable extension.\n2. Configure all files with a `.ts` extension to be handled by `awesome-typescript-loader`.\n\n**webpack.config.js**\n\n```javascript\n// `CheckerPlugin` is optional. Use it if you want async error reporting.\n// We need this plugin to detect a `--watch` mode. It may be removed later\n// after https://github.com/webpack/webpack/issues/3460 will be resolved.\nconst { CheckerPlugin } = require('awesome-typescript-loader')\n\nmodule.exports = {\n\n  // Currently we need to add '.ts' to the resolve.extensions array.\n  resolve: {\n    extensions: ['.ts', '.tsx', '.js', '.jsx']\n  },\n\n  // Source maps support ('inline-source-map' also works)\n  devtool: 'source-map',\n\n  // Add the loader for .ts files.\n  module: {\n    rules: [\n      {\n        test: /\\.tsx?$/,\n        loader: 'awesome-typescript-loader'\n      }\n    ]\n  },\n  plugins: [\n      new CheckerPlugin()\n  ]\n};\n```\n\nAfter that, you will be able to build TypeScript files with webpack.\n\n## NodeJS versions\n\n**The loader supports NodeJS 4 and newer.**\n\n## tsconfig.json\n\nYou can use the tsconfig.json file to configure your compiler and loader:\n\n```\n{\n    \"compilerOptions\": {\n        \"noImplicitAny\": true,\n        \"removeComments\": true\n    },\n    \"awesomeTypescriptLoaderOptions\": {\n        /* ... */\n    }\n}\n```\n\n## Supported TypeScript\n\n`awesome-typescript-loader@2.x` aims to support only `typescript@2.x` and `webpack@2x`, if you need old compilers please use\n`1.x` or `0.x` versions.\n\n## Advanced path resolution in TypeScript 2.0\n\nIf you want to use new `paths` and `baseUrl` feature of TS 2.0 please include `TsConfigPathsPlugin`.\nThis feature is available only for `webpack@2.1`.\n\n```\nconst { TsConfigPathsPlugin } = require('awesome-typescript-loader');\n\nresolve: {\n    plugins: [\n        new TsConfigPathsPlugin(/* { configFileName, compiler } */)\n    ]\n}\n```\n\n## Loader options\n\n### silent *(boolean) (default=false)*\n\nNo logging from the checker. Please note that this option disables async error reporting because\nthis option bans `console.log()` usage.\n\n### compiler *(string) (default='typescript')*\n\nAllows use of TypeScript compilers other than the official one. Must be\nset to the NPM name of the compiler, e.g. *ntypescript* or the path to a package folder.\nNote that the compiler must be installed in **your** project. You can also use\nnightly versions.\n\n### useTranspileModule (boolean) (default=false)*\n\nUse fast `transpileModule` emit mode. Disables automatically when you set compilerOption `declaration: true` ([reference](https://www.typescriptlang.org/docs/handbook/compiler-options.html)).\n\n### instance *(string) (default='at-loader')*\n\nAllows the use of several TypeScript compilers with different settings in one app. Override `instance` to initialize another instance.\n\n### configFileName *(string) (default='tsconfig.json')*\n\nSpecifies the path to a TS config file. This is useful when you have multiple config files. This setting is useless *inside* a TS config file.\n\n### transpileOnly *(boolean)*\n\nUse this setting to disable type checking, enabling this will nullify the `CheckerPlugin` usage in your webpack configuration.\n\n### errorsAsWarnings *(boolean)*\n\nEmit all typescript errors as warnings.\n\n### forceIsolatedModules *(boolean)*\n\nUse this setting to disable dependent module recompilation.\n\n### ignoreDiagnostics *(number[]) (default=[])*\n\nYou can squelch certain TypeScript errors by specifying an array of [diagnostic codes](https://github.com/Microsoft/TypeScript/blob/master/src/compiler/diagnosticMessages.json) to ignore.\nFor example, you can transpile [stage 1 properties](https://github.com/jeffmo/es-class-fields-and-static-properties) from `*.js` using `\"ignoreDiagnostics\": [8014]`.\n\n### useBabel *(boolean) (default=false)*\n\nInvoke Babel to transpile files. Useful with ES6 target. Please see `useCache` option\nwhich can improve warm-up time.\n\nIf you're using `babelOptions`, anything in `.babelrc` will take precedence. This breaks expected usage for scenarios where you need two sets of Babel configs (example: one for Webpack, one for your build tools).\n\nYou may want to `\"babelrc\": false` to disable `.babelrc` if you don't want it:\n\n```json\n{\n    \"useBabel\": true,\n    \"babelOptions\": {\n        \"babelrc\": false, /* Important line */\n        \"presets\": [\n            [\"@babel/preset-env\", { \"targets\": \"last 2 versions, ie 11\", \"modules\": false }]\n        ]\n    },\n    \"babelCore\": \"@babel/core\", // needed for Babel v7\n}\n```\n\n### babelCore *(string) (default=undefined)*\n\nOverride the path used to find `babel-core`. Useful if `node_modules` is installed in a non-standard place or webpack is being invoked from a directory not at the root of the project.\n\nFor Babel 7, this should be set to `\"@babel/core\"`.\n\n### babelOptions *(object) (default=null)*\n\nUse this option to pass some options to Babel (e.g. presets). Please note that\n[`.babelrc` file](https://babeljs.io/docs/usage/babelrc/) is more universal way to do this.\n\n### useCache *(boolean) (default=false)*\n\nUse internal file cache. This is useful with Babel, when processing takes a long time to complete. Improves warm-up time.\n\n### usePrecompiledFiles *(boolean) (default=false)*\n\nUse pre-compiled files if any. Files must be named as `{filename}.js` and `{filename}.map`.\n\n### cacheDirectory *(string) (default='.awcache')*\n\nDirectory where cache is stored.\n\n### reportFiles *(string[])*\n\nSpecify [globs](https://github.com/isaacs/minimatch) to report file diagnostics. ALL OTHER ERRORS WILL NOT BE REPORTED. Example:\n\n```\nreportFiles: [\n    \"src/**/*.{ts,tsx}\"\n]\n```\n\n### getCustomTransformers *(string | ((program: ts.Program) =\u003e ts.CustomTransformers | undefined)) (default=undefined)*\n\nProvide custom transformers, TypeScript 2.4.1+. Example:\n\n```js\nconst styledComponentsTransformer = require('typescript-plugin-styled-components').default;\nconst keysTransformer = require('ts-transformer-keys/transformer').default;\n\n// ...\nrules: [\n    {\n        test: /\\.tsx?$/,\n        loader: 'awesome-typescript-loader',\n        options: {\n            // ... other loader's options\n            getCustomTransformers: program =\u003e ({\n                before: [\n                    styledComponentsTransformer(),\n                    keysTransformer(program)\n                ]\n            })\n        }\n    }\n]\n```\n\n## Compiler options\n\nYou can pass compiler options inside the loader query string or in a TS config file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-panferov%2Fawesome-typescript-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs-panferov%2Fawesome-typescript-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-panferov%2Fawesome-typescript-loader/lists"}