Skip to content

README.md

Latest commit

 

History

History
41 lines (30 loc) · 1.5 KB

README.md

File metadata and controls

41 lines (30 loc) · 1.5 KB

Typescript + Babel + Path Mappings

How to setup a typescript project using babel as transpiler (Path Mappings working in VSCODE, Jest and Webpack)

Yes, Typescript and Babel is a perfect marriage. They are powerfull tools and last year both 2 teams worked together and their efforts made possible the following workflow:

  1. Typecheck with TSC;
  2. Transpile with Babel;

And if you are using Webpack you can typechecking and transpile at same time thanks to fork-ts-checker-webpack-plugin and babel-loader

But...

I experienced some issues. Not big deal. But this one made me crazy.

Typescript + Babel + Path Mappings...

Typescript path mapping is a great way to make your code cleaner. Things like:

import { sum, multiply } from "../../../../../util/math";

becomes:

import { sum, multiply } from "@util/math";

much better 😃

But it seems that @babel/preset-typescript still don't know how to deal with this typescript feature.

Today (July 2019) you can deal with this issue by adding and configuring the babel-plugin-module-resolver plugin to your project. And.. that's it! you are in the game again.

Check these files to know how to proppelly configure your Typescript + Babel (plus path mappings) project

  • jest.config.js
  • tsconfig.json
  • .babelrc

Scripts

  • npm run check-types check your code against tsconfig rules
  • npm test test your code with Jest
  • npm run build build your project with webpack. It wont emit TS definitions
  • npm run build:types Emit TS definitions