mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-01-31 11:02:07 +08:00
build: split vite config
This commit is contained in:
Miodec
parent
ac0e24e388
commit
c832f7eb39
3 changed files with 223 additions and 223 deletions
41
frontend/vite.config.dev.js
Normal file
41
frontend/vite.config.dev.js
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
import { checker } from "vite-plugin-checker";
|
||||
import Inspect from "vite-plugin-inspect";
|
||||
import path from "node:path";
|
||||
|
||||
/** @type {import("vite").UserConfig} */
|
||||
export default {
|
||||
plugins: [
|
||||
checker({
|
||||
typescript: {
|
||||
tsconfigPath: path.resolve(__dirname, "./tsconfig.json"),
|
||||
},
|
||||
eslint: {
|
||||
lintCommand: `eslint "${path.resolve(__dirname, "./src/ts/**/*.ts")}"`,
|
||||
},
|
||||
overlay: {
|
||||
initialIsOpen: false,
|
||||
},
|
||||
}),
|
||||
Inspect(),
|
||||
],
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: `
|
||||
$fontAwesomeOverride:"@fortawesome/fontawesome-free/webfonts";
|
||||
$previewFontsPath:"webfonts";
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
define: {
|
||||
BACKEND_URL: JSON.stringify(
|
||||
process.env.BACKEND_URL || "http://localhost:5005"
|
||||
),
|
||||
IS_DEVELOPMENT: JSON.stringify(true),
|
||||
CLIENT_VERSION: JSON.stringify("DEVELOPMENT_CLIENT"),
|
||||
RECAPTCHA_SITE_KEY: JSON.stringify(
|
||||
"6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
|
||||
),
|
||||
},
|
||||
};
|
||||
|
|
@ -1,45 +1,9 @@
|
|||
import { defineConfig, splitVendorChunkPlugin, mergeConfig } from "vite";
|
||||
import path from "node:path";
|
||||
import { defineConfig, mergeConfig } from "vite";
|
||||
import injectHTML from "vite-plugin-html-inject";
|
||||
import childProcess from "child_process";
|
||||
import { checker } from "vite-plugin-checker";
|
||||
import { VitePWA } from "vite-plugin-pwa";
|
||||
import replace from "vite-plugin-filter-replace";
|
||||
import Inspect from "vite-plugin-inspect";
|
||||
import autoprefixer from "autoprefixer";
|
||||
import "dotenv/config";
|
||||
import { fontawesomeSubset } from "fontawesome-subset";
|
||||
import { getFontawesomeConfig } from "./scripts/fontawesome";
|
||||
import { generatePreviewFonts } from "./scripts/font-preview";
|
||||
|
||||
function pad(numbers, maxLength, fillString) {
|
||||
return numbers.map((number) =>
|
||||
number.toString().padStart(maxLength, fillString)
|
||||
);
|
||||
}
|
||||
|
||||
function buildClientVersion() {
|
||||
const date = new Date();
|
||||
const versionPrefix = pad(
|
||||
[date.getFullYear(), date.getMonth() + 1, date.getDate()],
|
||||
2,
|
||||
"0"
|
||||
).join(".");
|
||||
const versionSuffix = pad([date.getHours(), date.getMinutes()], 2, "0").join(
|
||||
"."
|
||||
);
|
||||
const version = [versionPrefix, versionSuffix].join("_");
|
||||
|
||||
try {
|
||||
const commitHash = childProcess
|
||||
.execSync("git rev-parse --short HEAD")
|
||||
.toString();
|
||||
|
||||
return `${version}.${commitHash}`;
|
||||
} catch (e) {
|
||||
return `${version}.unknown-hash`;
|
||||
}
|
||||
}
|
||||
import PROD_CONFIG from "./vite.config.prod";
|
||||
import DEV_CONFIG from "./vite.config.dev";
|
||||
|
||||
/** @type {import("vite").UserConfig} */
|
||||
const BASE_CONFIG = {
|
||||
|
|
@ -63,19 +27,7 @@ const BASE_CONFIG = {
|
|||
}
|
||||
},
|
||||
},
|
||||
checker({
|
||||
typescript: {
|
||||
tsconfigPath: path.resolve(__dirname, "./tsconfig.json"),
|
||||
},
|
||||
eslint: {
|
||||
lintCommand: `eslint "${path.resolve(__dirname, "./src/ts/**/*.ts")}"`,
|
||||
},
|
||||
overlay: {
|
||||
initialIsOpen: false,
|
||||
},
|
||||
}),
|
||||
injectHTML(),
|
||||
Inspect(),
|
||||
],
|
||||
server: {
|
||||
open: process.env.SERVER_OPEN !== "false",
|
||||
|
|
@ -92,190 +44,19 @@ const BASE_CONFIG = {
|
|||
},
|
||||
},
|
||||
envDir: "../",
|
||||
build: {
|
||||
emptyOutDir: true,
|
||||
outDir: "../dist",
|
||||
assetsInlineLimit: 0, //dont inline small files as data
|
||||
rollupOptions: {
|
||||
input: {
|
||||
monkeytype: path.resolve(__dirname, "src/index.html"),
|
||||
email: path.resolve(__dirname, "src/email-handler.html"),
|
||||
privacy: path.resolve(__dirname, "src/privacy-policy.html"),
|
||||
security: path.resolve(__dirname, "src/security-policy.html"),
|
||||
terms: path.resolve(__dirname, "src/terms-of-service.html"),
|
||||
404: path.resolve(__dirname, "src/404.html"),
|
||||
},
|
||||
output: {
|
||||
assetFileNames: (assetInfo) => {
|
||||
let extType = assetInfo.name.split(".").at(1);
|
||||
if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
|
||||
extType = "images";
|
||||
}
|
||||
if (/\.(woff|woff2|eot|ttf|otf)$/.test(assetInfo.name)) {
|
||||
return `webfonts/[name]-[hash].${extType}`;
|
||||
}
|
||||
return `${extType}/[name].[hash][extname]`;
|
||||
},
|
||||
chunkFileNames: "js/[name].[hash].js",
|
||||
entryFileNames: "js/[name].[hash].js",
|
||||
},
|
||||
},
|
||||
},
|
||||
// resolve: {
|
||||
// alias: {
|
||||
// "/src": path.resolve(process.cwd(), "src"),
|
||||
// $: "jquery",
|
||||
// },
|
||||
// },
|
||||
define: {
|
||||
BACKEND_URL: JSON.stringify(
|
||||
process.env.BACKEND_URL || "http://localhost:5005"
|
||||
),
|
||||
IS_DEVELOPMENT: JSON.stringify(true),
|
||||
CLIENT_VERSION: JSON.stringify("DEVELOPMENT_CLIENT"),
|
||||
RECAPTCHA_SITE_KEY: JSON.stringify(
|
||||
"6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
|
||||
),
|
||||
},
|
||||
optimizeDeps: {
|
||||
include: ["jquery"],
|
||||
exclude: ["@fortawesome/fontawesome-free"],
|
||||
},
|
||||
};
|
||||
|
||||
/** @type {import("vite").UserConfig} */
|
||||
const DEV_CONFIG = {
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: `
|
||||
$fontAwesomeOverride:"@fortawesome/fontawesome-free/webfonts";
|
||||
$previewFontsPath:"webfonts";
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
/** @type {import("vite").UserConfig} */
|
||||
const BUILD_CONFIG = {
|
||||
plugins: [
|
||||
{
|
||||
name: "vite-plugin-fontawesome-subset",
|
||||
apply: "build",
|
||||
buildStart() {
|
||||
const fontawesomeClasses = getFontawesomeConfig();
|
||||
fontawesomeSubset(fontawesomeClasses, "src/webfonts-generated", {
|
||||
targetFormats: ["woff2"],
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "vite-plugin-webfonts-preview",
|
||||
apply: "build",
|
||||
buildStart() {
|
||||
generatePreviewFonts();
|
||||
},
|
||||
},
|
||||
splitVendorChunkPlugin(),
|
||||
VitePWA({
|
||||
injectRegister: "networkfirst",
|
||||
registerType: "autoUpdate",
|
||||
manifest: {
|
||||
short_name: "Monkeytype",
|
||||
name: "Monkeytype",
|
||||
start_url: "/",
|
||||
icons: [
|
||||
{
|
||||
src: "/images/icons/maskable_icon_x512.png",
|
||||
sizes: "512x512",
|
||||
type: "image/png",
|
||||
purpose: "maskable",
|
||||
},
|
||||
{
|
||||
src: "/images/icons/general_icon_x512.png",
|
||||
sizes: "512x512",
|
||||
type: "image/png",
|
||||
purpose: "any",
|
||||
},
|
||||
],
|
||||
background_color: "#323437",
|
||||
display: "standalone",
|
||||
theme_color: "#323437",
|
||||
},
|
||||
manifestFilename: "manifest.json",
|
||||
workbox: {
|
||||
clientsClaim: true,
|
||||
cleanupOutdatedCaches: true,
|
||||
globIgnores: ["**/.*"],
|
||||
globPatterns: [],
|
||||
navigateFallback: "",
|
||||
runtimeCaching: [
|
||||
{
|
||||
urlPattern: (options) => {
|
||||
const isApi = options.url.hostname === "api.monkeytype.com";
|
||||
return options.sameOrigin && !isApi;
|
||||
},
|
||||
handler: "NetworkFirst",
|
||||
options: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
replace([
|
||||
{
|
||||
filter: /firebase\.ts$/,
|
||||
replace: {
|
||||
from: /\.\/constants\/firebase-config/gi,
|
||||
to: "./constants/firebase-config-live",
|
||||
},
|
||||
},
|
||||
]),
|
||||
],
|
||||
define: {
|
||||
BACKEND_URL: JSON.stringify(
|
||||
process.env.BACKEND_URL || "https://api.monkeytype.com"
|
||||
),
|
||||
IS_DEVELOPMENT: JSON.stringify(false),
|
||||
CLIENT_VERSION: JSON.stringify(buildClientVersion()),
|
||||
RECAPTCHA_SITE_KEY: JSON.stringify(process.env.RECAPTCHA_SITE_KEY),
|
||||
},
|
||||
/** Enable for font awesome v6 */
|
||||
/*preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData(source, fp) {
|
||||
if (fp.endsWith("index.scss")) {
|
||||
const fontawesomeClasses = getFontawesomeConfig();
|
||||
return `
|
||||
//inject variables into sass context
|
||||
$fontawesomeBrands: ${sassList(
|
||||
fontawesomeClasses.brands
|
||||
)};
|
||||
$fontawesomeSolid: ${sassList(fontawesomeClasses.solid)};
|
||||
|
||||
${source}`;
|
||||
} else {
|
||||
return source;
|
||||
}
|
||||
},
|
||||
},
|
||||
},*/
|
||||
};
|
||||
|
||||
export default defineConfig(({ command }) => {
|
||||
if (command === "build") {
|
||||
if (process.env.RECAPTCHA_SITE_KEY === undefined) {
|
||||
throw new Error(".env: RECAPTCHA_SITE_KEY is not defined");
|
||||
}
|
||||
return mergeConfig(BASE_CONFIG, BUILD_CONFIG);
|
||||
return mergeConfig(BASE_CONFIG, PROD_CONFIG);
|
||||
} else {
|
||||
return mergeConfig(BASE_CONFIG, DEV_CONFIG);
|
||||
}
|
||||
});
|
||||
|
||||
/** Enable for font awesome v6 */
|
||||
/*
|
||||
function sassList(values) {
|
||||
return values.map((it) => `"${it}"`).join(",");
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
178
frontend/vite.config.prod.js
Normal file
178
frontend/vite.config.prod.js
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
import { fontawesomeSubset } from "fontawesome-subset";
|
||||
import { getFontawesomeConfig } from "./scripts/fontawesome";
|
||||
import { generatePreviewFonts } from "./scripts/font-preview";
|
||||
import { VitePWA } from "vite-plugin-pwa";
|
||||
import replace from "vite-plugin-filter-replace";
|
||||
import path from "node:path";
|
||||
import { splitVendorChunkPlugin } from "vite";
|
||||
import childProcess from "child_process";
|
||||
|
||||
function pad(numbers, maxLength, fillString) {
|
||||
return numbers.map((number) =>
|
||||
number.toString().padStart(maxLength, fillString)
|
||||
);
|
||||
}
|
||||
|
||||
function buildClientVersion() {
|
||||
const date = new Date();
|
||||
const versionPrefix = pad(
|
||||
[date.getFullYear(), date.getMonth() + 1, date.getDate()],
|
||||
2,
|
||||
"0"
|
||||
).join(".");
|
||||
const versionSuffix = pad([date.getHours(), date.getMinutes()], 2, "0").join(
|
||||
"."
|
||||
);
|
||||
const version = [versionPrefix, versionSuffix].join("_");
|
||||
|
||||
try {
|
||||
const commitHash = childProcess
|
||||
.execSync("git rev-parse --short HEAD")
|
||||
.toString();
|
||||
|
||||
return `${version}.${commitHash}`;
|
||||
} catch (e) {
|
||||
return `${version}.unknown-hash`;
|
||||
}
|
||||
}
|
||||
|
||||
/** Enable for font awesome v6 */
|
||||
/*
|
||||
function sassList(values) {
|
||||
return values.map((it) => `"${it}"`).join(",");
|
||||
}
|
||||
*/
|
||||
|
||||
/** @type {import("vite").UserConfig} */
|
||||
export default {
|
||||
plugins: [
|
||||
{
|
||||
name: "vite-plugin-fontawesome-subset",
|
||||
apply: "build",
|
||||
buildStart() {
|
||||
const fontawesomeClasses = getFontawesomeConfig();
|
||||
fontawesomeSubset(fontawesomeClasses, "src/webfonts-generated", {
|
||||
targetFormats: ["woff2"],
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "vite-plugin-webfonts-preview",
|
||||
apply: "build",
|
||||
buildStart() {
|
||||
generatePreviewFonts();
|
||||
},
|
||||
},
|
||||
splitVendorChunkPlugin(),
|
||||
VitePWA({
|
||||
injectRegister: "networkfirst",
|
||||
registerType: "autoUpdate",
|
||||
manifest: {
|
||||
short_name: "Monkeytype",
|
||||
name: "Monkeytype",
|
||||
start_url: "/",
|
||||
icons: [
|
||||
{
|
||||
src: "/images/icons/maskable_icon_x512.png",
|
||||
sizes: "512x512",
|
||||
type: "image/png",
|
||||
purpose: "maskable",
|
||||
},
|
||||
{
|
||||
src: "/images/icons/general_icon_x512.png",
|
||||
sizes: "512x512",
|
||||
type: "image/png",
|
||||
purpose: "any",
|
||||
},
|
||||
],
|
||||
background_color: "#323437",
|
||||
display: "standalone",
|
||||
theme_color: "#323437",
|
||||
},
|
||||
manifestFilename: "manifest.json",
|
||||
workbox: {
|
||||
clientsClaim: true,
|
||||
cleanupOutdatedCaches: true,
|
||||
globIgnores: ["**/.*"],
|
||||
globPatterns: [],
|
||||
navigateFallback: "",
|
||||
runtimeCaching: [
|
||||
{
|
||||
urlPattern: (options) => {
|
||||
const isApi = options.url.hostname === "api.monkeytype.com";
|
||||
return options.sameOrigin && !isApi;
|
||||
},
|
||||
handler: "NetworkFirst",
|
||||
options: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
replace([
|
||||
{
|
||||
filter: /firebase\.ts$/,
|
||||
replace: {
|
||||
from: /\.\/constants\/firebase-config/gi,
|
||||
to: "./constants/firebase-config-live",
|
||||
},
|
||||
},
|
||||
]),
|
||||
],
|
||||
build: {
|
||||
emptyOutDir: true,
|
||||
outDir: "../dist",
|
||||
assetsInlineLimit: 0, //dont inline small files as data
|
||||
rollupOptions: {
|
||||
input: {
|
||||
monkeytype: path.resolve(__dirname, "src/index.html"),
|
||||
email: path.resolve(__dirname, "src/email-handler.html"),
|
||||
privacy: path.resolve(__dirname, "src/privacy-policy.html"),
|
||||
security: path.resolve(__dirname, "src/security-policy.html"),
|
||||
terms: path.resolve(__dirname, "src/terms-of-service.html"),
|
||||
404: path.resolve(__dirname, "src/404.html"),
|
||||
},
|
||||
output: {
|
||||
assetFileNames: (assetInfo) => {
|
||||
let extType = assetInfo.name.split(".").at(1);
|
||||
if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
|
||||
extType = "images";
|
||||
}
|
||||
if (/\.(woff|woff2|eot|ttf|otf)$/.test(assetInfo.name)) {
|
||||
return `webfonts/[name]-[hash].${extType}`;
|
||||
}
|
||||
return `${extType}/[name].[hash][extname]`;
|
||||
},
|
||||
chunkFileNames: "js/[name].[hash].js",
|
||||
entryFileNames: "js/[name].[hash].js",
|
||||
},
|
||||
},
|
||||
},
|
||||
define: {
|
||||
BACKEND_URL: JSON.stringify(
|
||||
process.env.BACKEND_URL || "https://api.monkeytype.com"
|
||||
),
|
||||
IS_DEVELOPMENT: JSON.stringify(false),
|
||||
CLIENT_VERSION: JSON.stringify(buildClientVersion()),
|
||||
RECAPTCHA_SITE_KEY: JSON.stringify(process.env.RECAPTCHA_SITE_KEY),
|
||||
},
|
||||
/** Enable for font awesome v6 */
|
||||
/*preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData(source, fp) {
|
||||
if (fp.endsWith("index.scss")) {
|
||||
const fontawesomeClasses = getFontawesomeConfig();
|
||||
return `
|
||||
//inject variables into sass context
|
||||
$fontawesomeBrands: ${sassList(
|
||||
fontawesomeClasses.brands
|
||||
)};
|
||||
$fontawesomeSolid: ${sassList(fontawesomeClasses.solid)};
|
||||
|
||||
${source}`;
|
||||
} else {
|
||||
return source;
|
||||
}
|
||||
},
|
||||
},
|
||||
},*/
|
||||
};
|
||||
Loading…
Reference in a new issue