Say Goodbye to ‘../../../..’ in your TypeScript Imports

Don’t you hate writing import lines and not being sure how many dot-dot-slashes you need to get to the right place? Sure, you can look over at the project tree but there are so many files that you’ve got to scroll and scroll.

Oh no… Was that '../../../../' or '../../../../../'? [scrolls back down]. It drives me bananas.

Things are even worse if you restructure your project tree and some files move higher or lower. Or you copy-paste import sections between files that are at different levels in the project tree. Now your watch window is a sea of red.

But… it shouldn’t matter if your dependency is up four directories vs. five. Unfortunately, that’s just how module resolution works in Node.js.

Wouldn’t it be great if you could forget about relative paths entirely?

You could have the deepest, most complex project structure… bring it on.

Continue reading “Say Goodbye to ‘../../../..’ in your TypeScript Imports”

Say Goodbye to ‘../../../..’ in your TypeScript Imports

How to Fix Your Server-Side TypeScript Call Stack With webpack.BannerPlugin

TypeScript is a great language choice when you’re writing a large server-side Node.js project such as a universal React+Redux web application. However, debugging errors is challenging if you’re not set up for it properly.

Take an error call stack, for example…

An Insane Call Stack…

This is what TypeScript server-side errors can look like (without source map support):

Error: Big scary error message
    at Object.defineProperty.value (D:\BitBucket\Project\dist\server.js:2:8875)
    at t (D:\BitBucket\Project\dist\server.js:1:163)
    at Object.defineProperty.value (D:\BitBucket\Project\dist\server.js:22:2851)
    at t (D:\BitBucket\Project\dist\server.js:1:163)
    at Object.e.exports (D:\BitBucket\Project\dist\server.js:30:27387)
    at t (D:\BitBucket\Project\dist\server.js:1:163)
    at Object. (D:\BitBucket\Project\dist\server.js:21:29025)
    at t (D:\BitBucket\Project\dist\server.js:1:163)

Oh, I have an error on line 2… at column 8875 of a minified JavaScript bundle.

Thanks, log file.

Continue reading “How to Fix Your Server-Side TypeScript Call Stack With webpack.BannerPlugin”

How to Fix Your Server-Side TypeScript Call Stack With webpack.BannerPlugin

Improve SEO with a Simple Tweak to Your Webpack File-Loader Config

You’re building a website — more than a website… a modern web app — and you’re not shy about using JavaScript. But all that JavaScript sent you directly to Webpack.

go-directly-to-webpack-do-not-use-gulp

The problem with Webpack and the file-loader (well, one of the problems) is that they will happily mangle all your filenames by default. Don’t let this happen. You’re losing valuable SEO juice.

Continue reading “Improve SEO with a Simple Tweak to Your Webpack File-Loader Config”

Improve SEO with a Simple Tweak to Your Webpack File-Loader Config