Webpack also needs a lot of stuff to work. Sidenote: Comments are allowed in tsconfig.json files.
As for noEmit, the reason we should have this as true is that Babel is compiling the TypeScript for us, so we just want typescript to be used to check for errors (e.g. However, it’s important that you keep these options: "noEmit": true, "jsx": "react", preset-typescript and preset-react are quite self-explanatory: We're using both TypeScript and React, so we'll be needing them.įinally, we need to set up a file specifying to the compiler the presets we're using:įeel free to change some of the configuration above to better suit your needs. preset-env is used to prevent us from having headaches, allowing us to write modern JS while ensuring that the output will work across clients. The last three packages are Babel “templates” (presets) for dealing with various use cases. You can install them like this: yarn add -dev \ \ \ \ \ is the compiler - the main thing we need.īabel-cli will let us use the compiler via the CLI.
Getting Babel to work requires quite a few packages. As always, with enough docs, articles, and Stack Overflow posts, I got through it and learned more in the process. You can check the versions being used in package.json if you want to use this as a boilerplate.Īs an example, I decided to use webpack v5 for this tutorial, which brought some compatibility issues with configs I was originally using from webpack v4 projects. Hence, I won’t be tagging version numbers on installations. Rather than being a one-size-fits-all tutorial, this is meant to be a learning process, and dealing with issues that arise is inevitably an important part of it. The reason for choosing Kea is simply that I use it at work, and its author is my coworker. Kea is in fact built on top of Redux, so I’ll effectively be using Redux under the hood, but it makes state management significantly easier.įor full disclosure, I am definitely biased. Redux would have been the straightforward choice, but I went with Kea. However, based on my requirements, I still have one thing missing: a state management library. Even if you haven’t set these up yourself before, you’ve probably dealt with them or at least heard about them at some point. This short snippet tells me quite a bit about what I need and why I need it. It lets you write modern JavaScript code that still works in older browsers.” It lets you write modular code and bundle it together into small packages to optimize load time.Ī compiler such as Babel. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.Ī bundler, such as webpack or Parcel. Reading Creating a Toolchain from Scratch tells me the following about what I need: To find the answer, I started with the React docs. So what exactly do I need to make this work?
0 kommentar(er)
