20220215_esbuild.md

Switch build process from Parcel to ESBuild

ESBuild is a next-gen JavaScript bundler which is about 100x faster than Parcel. In addition, it understands some modern patterns that Parcel doesn't, so it makes sense to switch. You can also use it to compile TypeScript adapters faster.

Follow these steps to do use ESBuild in your adapter:

1. If you've been using Parcel before: npm uninstall -D @babel/cli @babel/core parcel-bundler

2. If you've been using Parcel before: remove the .babelrc file

3. Edit admin/tsconfig.json:

   -		// Support React - both must be here because parcel v1 does not
   -		// evaluate the "extends" option
   -		"jsx": "react",
   -		"esModuleInterop": true
   +		"jsx": "react"
   	},

4. Install or update @iobroker/adapter-dev using npm i -D @iobroker/adapter-dev

5. Update package.json scripts:

   1. If you want to compile TypeScript only (note: you can stick to compiling with tsc if you like):

      -    "prebuild": "rimraf ./build",
      -    "build:ts": "tsc -p tsconfig.build.json",
      -    "build": "npm run build:ts",
      -    "watch:ts": "tsc -p tsconfig.build.json --watch",
      -    "watch": "npm run watch:ts",
      +    "prebuild": "rimraf build",
      +    "build": "build-adapter ts",
      +    "watch": "build-adapter ts --watch",
      +    "prebuild:ts": "rimraf build",
      +    "build:ts": "build-adapter ts",
      +    "watch:ts": "build-adapter ts --watch",

      You can omit the duplicate scripts which end in :ts, but leaving them in makes it easier to transition to React later.
   2. If you want to compile React only:

      -    "watch:parcel": "parcel admin/src/index.jsx -d admin/build",
      -    "build:parcel": "parcel build admin/src/index.jsx -d admin/build",
      -    "build": "npm run build:parcel",
      +    "prebuild": "rimraf admin/build",
      +    "build": "build-adapter react",
      +    "watch": "build-adapter react --watch",
      +    "prebuild:react": "rimraf admin/build",
      +    "build:react": "build-adapter react",
      +    "watch:react": "build-adapter react --watch",

      You can omit the duplicate scripts which end in :react, but leaving them in makes it easier to add TypeScript compilation later.
   3. If you want to compile both TypeScript and React

      -    "prebuild": "rimraf ./build",
      -    "build:parcel": "parcel build admin/src/index.tsx -d admin/build",
      -    "build:ts": "tsc -p tsconfig.build.json",
      -    "build": "npm run build:ts && npm run build:parcel",
      -    "watch:parcel": "parcel admin/src/index.tsx -d admin/build",
      -    "watch:ts": "tsc -p tsconfig.build.json --watch",
      -    "watch": "npm run watch:ts",
      +    "prebuild": "rimraf build admin/build",
      +    "build": "build-adapter all",
      +    "watch": "build-adapter all --watch",
      +    "prebuild:ts": "rimraf build",
      +    "build:ts": "build-adapter ts",
      +    "watch:ts": "build-adapter ts --watch",
      +    "prebuild:react": "rimraf admin/build",
      +    "build:react": "build-adapter react",
      +    "watch:react": "build-adapter react --watch",