Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript.
Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser

Transpile to ES modules with Babel

posted in JavaScript on 2021-01-14   es babel javascript transpile typescript

While I was working on Navigo an issue popped out. It was about using the library in the context of Web Dev Server where we have everything in TypeScript. And something was not ok with Navigo. The npm package wasn't exported properly and we were keep getting a does not provide an export named 'default' error. It turned out the problem is that Navigo is not exported properly as ES module (also known as ESM).

read more

Replacing code for production with Babel transformation

posted in JavaScript on 2020-11-29   babel transform plugin production replacement

If you are building some sort of an app, Babel is probably part of your build system. It is that thing which converts our fancy code to valid, working in a browser, JavaScript. Just recently at work I had to design a solution that swaps a class based on the environment. Or in another words, we have logic that should not reach our users. The file should be available locally and on our staging environment but not in production. A tiny Babel plugin was the cheapest solution for me so I decided to share the result.

read more

Hopa - zero config CLI that runs JavaScript and TypeScript

posted in JavaScript on 2020-01-12   hopa runner typescript javascript babel typescript io webpack https code don t krasimir hopa

Yesterday was one of those days. I stumbled a task and wanted to find the right tool for it. That same task is on my way at least twice a week and I always refuse to optimize it. Because it was a weekend I decided to spend some time and research a proper tool for the job. Well, I find nothing that suites my need. I time-boxed a hour and said F.ck it!. I will code it myself. That's how Hopa was born - a zero config CLI that runs JavaScript and TypeScript. Transpiles, bundles, watches and executes code.

read more

The bare minimum to work with React

posted in JavaScript on 2016-06-13   react app function file babelrc return babelify browserify render superclass

The setup here is available at GitHub here.

Half an year ago I published A modern React starter pack based on webpack. The starter provides the basic tooling around React. However, I noticed that very often I need even less stuff than that. That’s usually when I want to hack something quickly. In this blog post we’ll see what’s the bare minimum to work with React.

read more

Start your own JavaScript library using webpack and ES6

posted in JavaScript on 2015-12-30   library js webpack babel true var file module exports eslint function build

Two months ago I published a starter pack for React based on webpack. Today I found out that I need almost the same thing but without the React bit. This simplifies the setup but there are still some tricky parts. So, I made a brand new repository webpack-library-starter and placed all the stuff that we need for creating a JavaScript library.

read more

Using Mocha with ES6 spec files

posted in JavaScript on 2015-12-23   mocha babel es6 package json file es5 babel preset es2015 tests test results javascript mocha reading spec files written

The new ES6 specification of JavaScript simply works better for me. It helps expressing my ideas in a shorter and cleaner way. So, I want to write ES6 everywhere. Even while I’m testing my applications.

read more

Distributing React components

posted in JavaScript on 2015-11-23   js react component file build react place src jsx browserify babel js map

While I was open sourcing react-place I noticed that there is some complexity around preparing the component for releasing. I decided to document the process here so I have a solid resource next time. You may be surprised but writing the working jsx file doesn’t mean that the component is ready for publishing and is usable for other developers.

read more