Javascript

This page is not about javascript as a language, it's more about the mess of tools around javascript and web development. I'm in no way an expert so if you the reader is not me, do your own research and open a discussion if you'd like to update this wiki.

Transpiling

A lot of tools in the javascript eco system work in a similar way:

• define a DSL
• build a tool that:
  • does <insert feature here>
  • translates the DSL to plain javascript

Another option is taking in plain javascript and outputting javascript.

Typescript

• Adds type hints to javascript.
• Can validate these typehints
• Can strip the typehints from the code to get plain js.

tsconfig.json

To configure typescript you'll need a tsconfig.json at the root of your project. This is used by typescript and the LSP of your IDE to find, check, and transpile your code.

Most times you'll have applications code and test code, each with their own config requirements. To still have your LSP resolve the configs you can use references in the main tsconfig.json without including any files itself. Then add the separate configs with whatever settings you need for each file type.

TODO: figure out why and how to use composite.

React

Makes the boundry between js and html fuzzy. I did not run into too much issues transpiling react so I'm not entirely sure how that works.

Webpack

Goes through your import tree and bundles all js files it runs into, into one.

Loaders can extend this by transpiling files before they hit webpack itself. This allows you to, for example, run typescript before bundling.

Generally you'll need to add the generated filename into an html page. The most simple version is html_webpack_plugin, taking a template html file and adding the needed script/style/link elements to it. This requires your to specify the javascript entry separately from the html.

html-bundler-webpack-plugin is an alternative that will take html files, search for <link>, <script>, and <img> elements and use them to determine the entry points. This allows very easy per-page bundling.

Babel

Takes javascript and transpiles it to a target compatibility version of javascript allowing you to target older browsers. It can also strip typescript annotations, although it won't type-check your code so be carefull.

NX

Here be leaky abstractions of build toolchains, stay away.