baseUrl
/ paths
module resolutionyarn add ts-loader --dev
or
npm install ts-loader --save-dev
You will also need to install TypeScript if you have not already.
yarn add typescript --dev
or
npm install typescript --save-dev
Use webpack like normal, including webpack --watch
and webpack-dev-server
, or through another
build system using the Node.js API.
We have a number of example setups to accommodate different workflows. Our examples can be found here.
We probably have more examples than we need. That said, here's a good way to get started:
ts-loader
ts-loader
just handling transpilation.As your project becomes bigger, compilation time increases linearly. It's because typescript's semantic checker has to inspect all files on every rebuild.
The simple solution is to disable it by using the transpileOnly: true
option, but doing so leaves you without type checking and will not output declaration files.
You probably don't want to give up type checking; that's rather the point of TypeScript. So what you can do is use the fork-ts-checker-webpack-plugin.
It runs the type checker on a separate process, so your build remains fast thanks to transpileOnly: true
but you still have the type checking.
If you'd like to see a simple setup take a look at our example.
ts-loader
supports Yarn Plug’n’Play. The recommended way to integrate is using the pnp-webpack-plugin.
ts-loader
works very well in combination with babel and babel-loader. There is an example of this in the official TypeScript Samples.
ts-loader
8.x if you need webpack 4 support)A full test suite runs each night (and on each pull request). It runs both on Linux and Windows, testing ts-loader
against major releases of TypeScript. The test suite also runs against TypeScript@next (because we want to use it as much as you do).
If you become aware of issues not caught by the test suite then please let us know. Better yet, write a test and submit it in a PR!
Create or update webpack.config.js
like so:
module.exports = { mode: "development", devtool: "inline-source-map", entry: "./app.ts", output: { filename: "bundle.js" }, resolve: { // Add `.ts` and `.tsx` as a resolvable extension. extensions: [".ts", ".tsx", ".js"], // Add support for TypeScripts fully qualified ESM imports. extensionAlias: { ".js": [".js", ".ts"], ".cjs": [".cjs", ".cts"], ".mjs": [".mjs", ".mts"] } }, module: { rules: [ // all files with a `.ts`, `.cts`, `.mts` or `.tsx` extension will be handled by `ts-loader` { test: /\.([cm]?ts|tsx)$/, loader: "ts-loader" } ] } };
Add a tsconfig.json
file. (The one below is super simple; but you can tweak this to your hearts desire)
{ "compilerOptions": { "sourceMap": true } }
The tsconfig.json file controls
TypeScript-related options so that your IDE, the tsc
command, and this loader all share the
same options.
devtool
/ sourcemapsIf you want to be able to debug your original source then you can thanks to the magic of sourcemaps. There are 2 steps to getting this set up with ts-loader
and webpack.
First, for ts-loader
to produce sourcemaps, you will need to set the tsconfig.json option as "sourceMap": true
.
Second, you need to set the devtool
option in your webpack.config.js
to support the type of sourcemaps you want. To make your choice have a read of the devtool
webpack docs. You may be somewhat daunted by the choice available. You may also want to vary the sourcemap strategy depending on your build environment. Here are some example strategies for different environments:
devtool: 'inline-source-map'
- Solid sourcemap support; the best "all-rounder". Works well with karma-webpack (not all strategies do)devtool: 'eval-cheap-module-source-map'
- Best support for sourcemaps whilst debugging.devtool: 'source-map'
- Approach that plays well with UglifyJsPlugin; typically you might use this in ProductionLoading css and other resources is possible but you will need to make sure that
you have defined the require
function in a declaration file.
declare var require: { <T>(path: string): T; (paths: string[], callback: (...modules: any[]) => void): void; ensure: ( paths: string[], callback: (require: <T>(path: string) => T) => void ) => void; };
Then you can simply require assets or chunks per the webpack documentation.
require("!style!css!./style.css");
The same basic process is required for code splitting. In this case, you import
modules you need but you
don't directly use them. Instead you require them at split points. See this example and this example for more details.
TypeScript 2.4 provides support for ECMAScript's new import()
calls. These calls import a module and return a promise to that module. This is also supported in webpack - details on usage can be found here. Happy code splitting!
To output declaration files (.d.ts), you can set "declaration": true in your tsconfig and set "transpileOnly" to false.
If you use ts-loader with "transpileOnly": true along with fork-ts-checker-webpack-plugin, you will need to configure fork-ts-checker-webpack-plugin to output definition files, you can learn more on the plugin's documentation page: https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#typescript-options
To output a built .d.ts file, you can use the DeclarationBundlerPlugin in your webpack config.
The build should fail on TypeScript compilation errors as of webpack 2. If for some reason it does not, you can use the webpack-fail-plugin.
For more background have a read of this issue.
baseUrl
/ paths
module resolutionIf you want to resolve modules according to baseUrl
and paths
in your tsconfig.json
then you can use the tsconfig-paths-webpack-plugin package. For details about this functionality, see the module resolution documentation.
This feature requires webpack 2.1+ and TypeScript 2.0+. Use the config below or check the package for more information on usage.
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); module.exports = { ... resolve: { plugins: [new TsconfigPathsPlugin({ configFile: "./path/to/tsconfig.json" })] } ... }
There are two types of options: TypeScript options (aka "compiler options") and loader options. TypeScript options should be set using a tsconfig.json file. Loader options can be specified through the options
property in the webpack configuration:
module.exports = { ... module: { rules: [ { test: /\.tsx?$/, use: [ { loader: 'ts-loader', options: { transpileOnly: true } } ] } ] } }
Type | Default Value |
---|---|
boolean | false |
If you want to speed up compilation significantly you can set this flag.
However, many of the benefits you get from static type checking between different dependencies in your application will be lost. transpileOnly
will not speed up compilation of project references.
It's advisable to use transpileOnly
alongside the fork-ts-checker-webpack-plugin to get full type checking again. To see what this looks like in practice then either take a look at our example.
Tip: When you add the fork-ts-checker-webpack-plugin to your webpack config, the
transpileOnly
will default totrue
, so you can skip that option.
If you enable this option, webpack 4 will give you "export not found" warnings any time you re-export a type:
WARNING in ./src/bar.ts
1:0-34 "export 'IFoo' was not found in './foo'
@ ./src/bar.ts
@ ./src/index.ts
The reason this happens is that when typescript doesn't do a full type check, it does not have enough information to determine whether an imported name is a type or not, so when the name is then exported, typescript has no choice but to emit the export. Fortunately, the extraneous export should not be harmful, so you can just suppress these warnings:
module.exports = { ... stats: { warningsFilter: /export .* was not found in/ } }
Type | Default Value |
---|---|
boolean | false |
If you're using HappyPack or thread-loader to parallelise your builds then you'll need to set this to true
. This implicitly sets *transpileOnly*
to true
and WARNING! stops registering all errors to webpack.
It's advisable to use this with the fork-ts-checker-webpack-plugin to get full type checking again. IMPORTANT: If you are using fork-ts-checker-webpack-plugin alongside HappyPack or thread-loader then ensure you set the syntactic
diagnostic option like so:
new ForkTsCheckerWebpackPlugin({ typescript: { diagnosticOptions: { semantic: true, syntactic: true, }, }, })
This will ensure that the plugin checks for both syntactic errors (eg const array = [{} {}];
) and semantic errors (eg const x: number = '1';
). By default the plugin only checks for semantic errors (as when used with ts-loader
in transpileOnly
mode, ts-loader
will still report syntactic errors).
Also, if you are using thread-loader
in watch mode, remember to set poolTimeout: Infinity
so workers don't die.
These options should be functions which will be used to resolve the import statements and the <reference types="...">
directives instead of the default TypeScript implementation. It's not intended that these will typically be used by a user of ts-loader
- they exist to facilitate functionality such as Yarn Plug’n’Play.
Type |
---|
(program: Program, getProgram: () => Program) => { before?: TransformerFactory<SourceFile>[]; after?: TransformerFactory<SourceFile>[]; afterDeclarations?: TransformerFactory<SourceFile>[]; } |
Provide custom transformers - only compatible with TypeScript 2.3+ (and 2.4 if using transpileOnly
mode). For example usage take a look at typescript-plugin-styled-components or our test.
You can also pass
AI小说写作助手,一站式润色、改写、扩写
蛙蛙写作—国内先进的AI写作平台,涵盖小说、学术、社交媒体等多场景。提供续写、改写、润色等功能,助力创作者高效优化写作流程。界面简洁,功能全面,适合各类写作者提升内容品质和工作效率。
字节跳动发布的AI编程神器IDE
Trae是一种自适应的集成开发环境(IDE),通过自动化和多元协作改变开发流程。利用Trae,团队能够更快速、精确地编写和部署代码,从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能,是提升开发效率的理想工具。
全能AI智能助手,随时解答生活与工作的多样问题
问小白,由元石科技研发的AI智能助手,快速准确地解答各种生活和工作问题,包括但不限于搜索、规划和社交互动,帮助用户在日常生活中提高效率,轻松管理个人事务。
实时语音翻译/同声传译工具
Transly是一个多场景的AI大语言模型驱动的同声传译、专业翻译助手,它拥有超精准的音频识别翻译能力,几乎零延迟的使用体验和支持多国语言可以让你带它走遍全球,无论你是留学生、商务人士、韩剧美剧爱好者,还是出国游玩、多国会议、跨国追星等等,都可以满足你所有需要同传的场景需求,线上线下通用,扫除语言障碍,让全世界的语言交流不再有国界。
一键生成PPT和Word,让学 习生活更轻松
讯飞智文是一个利用 AI 技术的项目,能够帮助用户生成 PPT 以及各类文档。无论是商业领域的市场分析报告、年度目标制定,还是学生群体的职业生涯规划、实习避坑指南,亦或是活动策划、旅游攻略等内容,它都能提供支持,帮助用户精准表达,轻松呈现各种信息。
深度推理能力全新升级,全面对标OpenAI o1
科大讯飞的星火大模型,支持语言理解、知识问答和文本创作等多功能,适用于多种文件和业务场景,提升办公和日常生活的效率。讯飞星火是一个提供丰富智能服务的平台,涵盖科技资讯、图像创作、写作辅助、编程解答、科研文献解读等功能,能为不同需求的用户提供便捷高效的帮助,助力用户轻松获取信息、解决问题,满足多样化使用场景。
一种基于大语言模型的高效单流解耦语音令牌文本到语音合成模型
Spark-TTS 是一个基于 PyTorch 的开源文本到语音合成项目,由多个知名机构联合参与。该项目提供了高效的 LLM(大语言模型)驱动的语音合成方案,支持语音克隆和语音创建功能,可通过命令行界面(CLI)和 Web UI 两种方式使用。用户可以根据需求调整语音的性别、音高、速度等参数,生成高质量的语音。该项目适用于多种场景,如有声读物制作、智能语音助手开发等。
AI助力,做PPT更简单!
咔片是一款轻量化在线演示设计工具,借助 AI 技术,实现从内容生成到智能设计的一站式 PPT 制作服务。支持多种文档格式导入生成 PPT,提供海量模板、智能美化、素材替换等功能,适用于销售、教师、学生等各类人群,能高效制作出高品质 PPT,满足不同场景演示需求。
选题、配图、成文,一站式创作,让内容运营更高效
讯飞绘文,一个AI集成平台,支持写作、选题、配图、排版和发布。高效生成适用于各类媒体的定制内容,加速品牌传播,提升内容营销效果。