From 62e9792c39b93f942f4bc1b4c6fa6a9b19405ab5 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Wed, 18 Nov 2020 08:44:45 +0000 Subject: [PATCH] Add note about building the frontend --- build-scripts/README.md | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 build-scripts/README.md diff --git a/build-scripts/README.md b/build-scripts/README.md new file mode 100644 index 0000000000..afdf7a15b2 --- /dev/null +++ b/build-scripts/README.md @@ -0,0 +1,39 @@ +# Bundling Home Assistant Frontend + +The Home Assistant build pipeline contains various steps to prepare a build. + +- Generating icon files to be included +- Generating translation files to be included +- Converting TypeScript, CSS and JSON files to JavaScript +- Bundling +- Minifying the files +- Generating the HTML entrypoint files +- Generating the service worker +- Compressing the files + +## Converting files responsibilities + +Currently in Home Assistant we use a bundler to convert TypeScript, CSS and JSON files to JavaScript files that the browser understands. + +We currently rely on Webpack but also have experimental Rollup support. Both of these programs bundle the converted files in both production and development. + +For development, bundling is optional. We just want to get the right files in the browser. + +Responsibilities of the converter during development: + +- Convert TypeScript to JavaScript +- Convert CSS to JavaScript that sets the content as the default export +- Convert JSON to JavaScript that sets the content as the default export +- Make sure import, dynamic import and web worker references work + - Add extensions where missing + - Resolve absolute package imports +- Filter out specific imports/packages +- Replace constants with values + +In production, the following responsibilities are added: + +- Minify HTML +- Bundle multiple imports so that the browser can fetch less files +- Generate a second version that is ES5 compatible + +Configuration for all these steps are specified in [bundle.js](bundle.js).