Use esbuild instead of parcel

README.md

@@ -66,6 +66,6 @@ On this page, you can also set up automatic deploys if you want. You probably wa
 
 ## Static assets
 
-CSS and JS goes in the `assets/` directory. These are compiled by [Parcel](https://parceljs.org/) into `{{ project_name }}/static/dist`. You can write any CSS and JS that Parcel supports -- stuff like modern ES6, JSX, SCSS, and so on.
+CSS and JS goes in the `assets/` directory. These are compiled by [esbuild](https://esbuild.github.io/) and [postcss](https://postcss.org/) into `{{ project_name }}/static/dist`. You can write any modern JS that esbuild supports -- ES6, JSX, etc.
 
 In development, Docker Compose runs a Parcel daemon alongside your Django development server to compile assets live. For production, Parcel is run in `Dockerfile` to bake the compiled assets into the production artifact.

assets/js/index.js

@@ -1,6 +0,0 @@
-// CSS Entrypoint
-//
-// We do it like this instead of specifying it as an extra target in Parcel
-// because Parcel does lots of weird stuff when there are multiple entrypoints.
-// e.g. https://github.com/parcel-bundler/parcel/issues/2704
-import "../css/index.scss";

package.json

@@ -2,27 +2,31 @@
   "name": "{{ project_name }}",
   "version": "1.0.0",
   "scripts": {
-    "build": "parcel build --no-autoinstall -d {{ project_name }}/static/dist assets/js/index.js",
-    "start": "parcel watch --no-autoinstall --no-hmr -d {{ project_name }}/static/dist assets/js/index.js"
+    "build": "npm run build-js && npm run build-css",
+    "start": "concurrently \"npm:watch-css\" \"npm:watch-js\"",
+    "watch-css": "postcss assets/css/index.css -o {{ project_name }}/static/dist/index.css -w",
+    "build-css": "cross-env ENV_BUILD=prod postcss assets/css/index.css -o {{ project_name }}/static/dist/index.css",
+    "watch-js": "esbuild assets/js/index.js --bundle --sourcemap=inline --target=es2016 --outfile={{ project_name }}/static/dist/index.js --watch",
+    "build-js": "esbuild assets/js/index.js --bundle --minify --target=es2016 --outfile={{ project_name }}/static/dist/index.js"
   },
   "dependencies": {},
   "devDependencies": {
-    "@babel/core": "^7.7.2",
-    "@babel/plugin-proposal-class-properties": "^7.7.0",
-    "@babel/preset-env": "^7.7.1",
     "@typescript-eslint/eslint-plugin": "2.x",
     "@typescript-eslint/parser": "2.x",
-    "babel-eslint": "10.x",
+    "concurrently": "^6.4.0",
+    "esbuild": "^0.14.2",
     "eslint": "6.x",
     "eslint-config-react-app": "^5.0.2",
     "eslint-plugin-flowtype": "4.7.0",
     "eslint-plugin-import": "2.x",
     "eslint-plugin-jsx-a11y": "6.x",
     "eslint-plugin-react": "7.x",
     "eslint-plugin-react-hooks": "3.0.0",
-    "parcel-bundler": "^1.12.4",
+    "postcss": "^8.4.4",
+    "postcss-cli": "^9.0.2",
+    "postcss-import": "^14.0.2",
+    "postcss-nested": "^5.0.6",
     "prettier": "^2.0.2",
-    "sass": "^1.23.6",
-    "webpack": "^4.41.2"
+    "sass": "^1.23.6"
   }
 }