Javascript tooling overview

Tools with which to build a reliable javascript toolchain

view on github

babel (javascript code compilation)

✔️ 3 basic modules :

  • @babel/cli : command line utility
  • @babel/core : compiler core
  • @babel/preset-env : bundle of environment-specific configuration presets (compatible syntax transforms and polyfills)

✔️ 1 config file:

  • babel.config.json
  • sourceType : consider every file a module (to match type in package.json)
  • the preset-env options are specified there :
    • targets : target environments for the compiled code (list of key-value pairs: environment/version)
    • useBuiltins : set to 'usage' to import core-js polyfills in the compiled code
    • corejs : version of core-js to use, must match the version in package.json (usually @3)

✔️ the code will then be compiled to target said environments by using the relevant syntax transforms and polyfills (cf. caniuse)

core-js (javascript code polyfilling)

✔️ 1 basic module :

  • core-js : modular library of polyfills for javascript

✔️ installing as a dev dependency is enough if the compiled code is only for jest tests to run against

✔️ however, if the compiled code is a build that will deploy to production, core-js must be installed as a dependency or the code may break

jest (javascript unit testing)

✔️ 2 modules :

  • jest : testing framework (tests run in a node.js environment by default)
  • jest-environment-jsdom : jsdom based implementation of the DOM / browser APIs (adds browser environment support for tests)

✔️ 1 config file :

  • jest.config.json
  • the transformers (ie. babel-jest) that will process the code before the tests are run against it are specified there

✔️ notes :

  • jsdom is bundled into jest-environment-jsdom, no need to install it when using jest
  • it is a best practice to always specify the tests environments directive in each file:
/**
 * @jest-environment (jsdom|node)
 */

babel-jest (transpiles javascript code before tests run)

✔️ is installed by default with jest

✔️ will be included as a transformer in the jest config file (allows tests execution without using the node experimental modules option)

✔️ it is therefore mandatory to also have a babel config file to specify the target environments for babel-jest

testing-library (allows running tests on DOM)

✔️ 2 modules :

  • @testing-library/dom : allows querying the DOM for nodes (be it the actual browser's DOM or the jsdom based DOM)
  • @testing-library/jest-dom : set of custom Jest matchers to run tests on the DOM nodes (has to be manually imported in test files)

vite (DX + transpiles, treeshakes and bundles javascript code)

✔️ 2 modules :

  • vite : developement server with HMR support + ESBuild based build
    • improves the development experience and saves time
    • performs tree-shaking of the code and dependencies and produces super optimized builds (using esbuild and rollup)
  • @vitejs/plugin-legacy : enable legacy browser support in builds
    • accepts @babel/preset-env options as input
    • all necessary polyfills are included, therefore installing core-js and configuring useBuiltins is not needed
    • terser has to be installed as a dev dependency since it is used for minification

✔️ 1 config file :

  • vite.config.js
    • native esbuild transpilation build.target has to be disabled for @vitejs/plugin-legacy to work