Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support JS build process #141

Merged
merged 9 commits into from
Feb 26, 2024
Merged

feat: support JS build process #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1f26677
chore: install esbuild
dustin-jw Oct 18, 2023
cebbaaa
chore: incorporate esbuild into build process
dustin-jw Oct 18, 2023
32cda9e
refactor: reference built JS files
dustin-jw Oct 18, 2023
b525a65
refactor: move/rename game selection functions
dustin-jw Oct 18, 2023
3f700d9
refactor: move pagination functions to helpers
dustin-jw Oct 18, 2023
9613ac4
fix: update page title to match randomized order
dustin-jw Oct 18, 2023
6056e28
refactor: pull most logic into helper functions/files
dustin-jw Oct 18, 2023
9e17e36
style: add clarifying comments
dustin-jw Feb 23, 2024
dcd2cac
style: remove empty line before JSON output
dustin-jw Feb 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
module.exports = {
env: {
browser: true,
commonjs: true,
node: true,
es2021: true,
},
extends: 'eslint:recommended',
parserOptions: {
sourceType: 'module',
ecmaVersion: 'latest',
},
ignorePatterns: ['dist', 'node_modules'],
Expand Down
28 changes: 28 additions & 0 deletions esbuild.mjs
View file
Open in desktop
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not entirely sure what this file is doing. It's setting a bunch of variables/data based on whether or not the environment is dev/local or production I think, but I don't really know why. Some of them I get- like minify is true for the production files (so after the site is built). Same for bundle, and I understand outdir...

Maybe I need to look up esbuild.context()? Would that be a good place to start?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

esbuild is similar to webpack, which you might have seen before, but effectively it's a build tool for bundling/smooshing together JS (it can do other things, but that's the basic idea).

What could probably be clearer is that if isProduction is false, then we're running esbuild in "watch" mode, so it will rebuild whenever you save a file that affects the entry points. Otherwise, we just build our output JS files once and call it a day. I'll add some comments to clarify that behavior because I don't think it's intuitive.

Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import * as esbuild from 'esbuild';
import { config } from 'dotenv';

config();

const isProduction = process.env.NODE_ENV !== 'development';

const options = {
entryPoints: ['src/js/*.js'],
format: 'esm',
bundle: true,
splitting: true,
outdir: 'dist/js',
// run `npx browserslist` to find updated minimum versions to set here
target: ['chrome109', 'edge109', 'firefox109', 'safari15.5', 'opera94'],
sourcemap: isProduction ? false : 'inline',
minify: isProduction,
logLevel: 'info',
};

if (!isProduction) {
// watch for changes and rebuild during development
let context = await esbuild.context(options);
await context.watch();
} else {
// build once and exit
await esbuild.build(options);
}
Loading
Loading