Using TypeScript and ESLint with webpack (fork-ts-checker-webpack-plugin new feature!)
The fork-ts-checker-webpack-plugin
has, since its inception, performed two classes of checking:
The TypeScript programming language.
View All TagsThe fork-ts-checker-webpack-plugin
has, since its inception, performed two classes of checking:
Yarn PnP is an innovation by the Yarn team designed to speed up module resolution by node. To quote the (excellent) docs:
I'm one of the maintainers of the fork-ts-checker-webpack-plugin. Hi there!
It's time for the first major version of fork-ts-checker-webpack-plugin
. It's been a long time coming :-)
All I ask for is a compiler and a tight feedback loop. Narrowing the gap between making a change to a program and seeing the effect of that is a productivity boon. The TypeScript team are wise cats and dig this. They've taken strides to improve the developer experience of TypeScript users by introducing a "watch" API which can be leveraged by other tools. To quote the docs:
So project references eh? They shipped with TypeScript 3. We've just shipped initial support for project references in ts-loader v5.2.0
. All the hard work was done by the amazing Andrew Branch. In fact I'd recommend taking a gander at the PR. Yay Andrew!
This a tale of things that are and things that aren't. It's a tale of semantic versioning, the lack thereof and heartbreak. It's a story of terror and failing builds. But it has a bittersweet ending wherein our heroes learn a lesson and understand the need for compromise. We all come out better and wiser people. Hopefully there's something for everybody; let's start with an exciting opener and see where it goes...
This post shows how you can use TypeScript with webpack alias
to move away from using relative paths in your import
statements.
Most applications I write have some need for authentication and perhaps authorisation too. In fact, most apps most people write fall into that bracket. Here's the thing: Auth done well is a *big* chunk of work. And the minute you start thinking about that you almost invariably lose focus on the thing you actually want to build and ship.
2017 is drawing to a close, and it's been a big, big year in webpack-land. It's been a big year for ts-loader
too. At the start of the year v1.3.3 was the latest version available, officially supporting webpack 1. (Old school!) We end the year with ts-loader
sitting pretty at v3.2.0 and supporting webpack 2 and 3.
So, there you sit, conflicted. You've got a lovely build setup; it's a thing of beauty. Precious, polished like a diamond, sharpened like a circular saw. There at the core of your carefully crafted setup sits webpack. Heaving, mysterious... powerful.
A funny thing happened on the way to the registry the other day. Something changed in an npm package I was using and confusion arose. You can read my unfiltered confusion here but here's the slightly clearer explanation.
One of the most exciting features to ship with TypeScript 2.4 was support for the dynamic import expression. To quote the release blog post:
I've recently started a new role. Perhaps unsurprisingly, part of the technology stack is TypeScript. A couple of days into the new codebase I found a bug. Well, I say I found a bug, TypeScript and VS Code found the bug - I just let everyone else know.
That's how I was feeling on the morning of October 6th 2016. I'd been feeling that way for some time. The target of my concern? ts-loader. ts-loader is a loader for webpack; the module bundler. ts-loader allows you use TypeScript with webpack. I'd been a merry user of it for at least a year or so. But, at that point, all was not well in the land of ts-loader. Come with me and I'll tell you a story...
TypeScript 2.0 has shipped! Naturally I'm excited. For some time I've been using TypeScript to emit ES2015 code which I pass onto Babel to transpile to ES "old school". You can see how here.
I'm addicted to the ternary operator. For reasons I can't explain, I cannot get enough of:
I've been searching for a way to describe what the DefinePlugin actually does. The docs say:
Define free variables. Useful for having development builds with debug logging or adding global constants.
I'm a great lover of ES2015's Map
. However, just recently I tumbled over something I find a touch inconvenient about how you initialise a new Map
from the contents of an Array
in TypeScript.