Add the build script and type definitions.
This commit is contained in:
parent
ae7d210b15
commit
e43d18a363
|
@ -0,0 +1,82 @@
|
||||||
|
// Import native Node libraries.
|
||||||
|
import path from "node:path";
|
||||||
|
import process from "node:process";
|
||||||
|
import fsp from "node:fs/promises";
|
||||||
|
// Import Esbuild and associated plugins.
|
||||||
|
import esbuild from "esbuild";
|
||||||
|
import copyPlugin from "esbuild-copy-static-files";
|
||||||
|
import {sassPlugin} from "esbuild-sass-plugin";
|
||||||
|
// Import PostCSS and associated plugins.
|
||||||
|
import cssnano from "cssnano";
|
||||||
|
import postcss from "postcss";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create an absolute path from a given relative one, using the directory
|
||||||
|
* this file is located in as the base.
|
||||||
|
*
|
||||||
|
* @param relative The relative path to make absolute.
|
||||||
|
* @returns The absolute path.
|
||||||
|
*/
|
||||||
|
function toAbsolutePath(relative: string): string {
|
||||||
|
return new URL(relative, import.meta.url).pathname;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create variables based on the environment.
|
||||||
|
const dev = process.env.NODE_ENV === "development";
|
||||||
|
const watch = process.env.WATCH === "true";
|
||||||
|
|
||||||
|
// Create absolute paths to various directories.
|
||||||
|
const outDir = toAbsolutePath("../build");
|
||||||
|
const sourceDir = toAbsolutePath("../source");
|
||||||
|
|
||||||
|
// Ensure that the output directory exists.
|
||||||
|
await fsp.mkdir(outDir, {recursive: true});
|
||||||
|
|
||||||
|
const cssProcessor = postcss([cssnano()]);
|
||||||
|
|
||||||
|
const options: esbuild.BuildOptions = {
|
||||||
|
bundle: true,
|
||||||
|
// Define variables to be replaced in the code. Note that these are replaced
|
||||||
|
// "as is" and so we have to stringify them as JSON, otherwise a string won't
|
||||||
|
// have its quotes for example.
|
||||||
|
define: {
|
||||||
|
$dev: JSON.stringify(dev),
|
||||||
|
},
|
||||||
|
entryPoints: [path.join(sourceDir, "setup.tsx")],
|
||||||
|
format: "esm",
|
||||||
|
logLevel: "info",
|
||||||
|
minify: !dev,
|
||||||
|
outdir: outDir,
|
||||||
|
plugins: [
|
||||||
|
// Copy all files from `source/assets/` to the output directory.
|
||||||
|
copyPlugin({src: path.join(sourceDir, "assets/"), dest: outDir}),
|
||||||
|
|
||||||
|
// Compile SCSS to CSS.
|
||||||
|
sassPlugin({
|
||||||
|
type: "style",
|
||||||
|
async transform(source) {
|
||||||
|
// In development, don't do any extra processing.
|
||||||
|
if (dev) {
|
||||||
|
return source;
|
||||||
|
}
|
||||||
|
|
||||||
|
// But in production, run the CSS through PostCSS.
|
||||||
|
const {css} = await cssProcessor.process(source, {from: undefined});
|
||||||
|
return css;
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
// Link sourcemaps in development but omit them in production.
|
||||||
|
sourcemap: dev ? "linked" : false,
|
||||||
|
splitting: true,
|
||||||
|
// Target ES2022, and the first Chromium and Firefox releases from 2022.
|
||||||
|
target: ["es2022", "chrome97", "firefox102"],
|
||||||
|
treeShaking: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (watch) {
|
||||||
|
const context = await esbuild.context(options);
|
||||||
|
await context.watch();
|
||||||
|
} else {
|
||||||
|
await esbuild.build(options);
|
||||||
|
}
|
|
@ -0,0 +1,15 @@
|
||||||
|
// Type definitions for third-party packages.
|
||||||
|
|
||||||
|
declare module "esbuild-copy-static-files" {
|
||||||
|
import {type cpSync} from "node:fs";
|
||||||
|
import {type Plugin} from "esbuild";
|
||||||
|
|
||||||
|
type CopySyncParameters = Parameters<typeof cpSync>;
|
||||||
|
|
||||||
|
type Options = {
|
||||||
|
src?: CopySyncParameters[0];
|
||||||
|
dest?: CopySyncParameters[1];
|
||||||
|
} & CopySyncParameters[2];
|
||||||
|
|
||||||
|
export default function (options: Options): Plugin;
|
||||||
|
}
|
|
@ -0,0 +1,6 @@
|
||||||
|
// Export something so TypeScript doesn't see this file as an ambient module.
|
||||||
|
export {};
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
const $dev: boolean;
|
||||||
|
}
|
Loading…
Reference in New Issue