build.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. /* eslint-env node */
  2. /* eslint-disable no-console */
  3. // Build JS and CSS using esbuild and PostCSS
  4. import { promises as fs } from 'node:fs';
  5. import path from 'node:path';
  6. import esbuild from 'esbuild';
  7. import postcss from 'postcss';
  8. import postcssConfig from './postcss.config.js';
  9. // Packages to build but exclude from bundle
  10. const externalPackages = ['chart.js/auto', 'alpinejs/dist/cdn.min.js'];
  11. // Build main bundle
  12. async function buildJS() {
  13. const inputPath = './web/js/src/index.js';
  14. try {
  15. await esbuild.build({
  16. entryPoints: [inputPath],
  17. outfile: './web/js/dist/main.min.js',
  18. bundle: true,
  19. minify: true,
  20. sourcemap: true,
  21. external: externalPackages,
  22. });
  23. console.log('✅ JavaScript build completed for', inputPath);
  24. } catch (error) {
  25. console.error('❌ Error building JavaScript:', error);
  26. process.exit(1);
  27. }
  28. }
  29. // Build external packages
  30. async function buildExternalJS() {
  31. try {
  32. const buildPromises = externalPackages.map(async (pkg) => {
  33. const outputPath = getOutputPath(pkg);
  34. await esbuild.build({
  35. entryPoints: [pkg],
  36. outfile: outputPath,
  37. bundle: true,
  38. minify: true,
  39. format: 'esm',
  40. });
  41. console.log(`✅ Dependency build completed for ${pkg}`);
  42. });
  43. await Promise.all(buildPromises);
  44. } catch (error) {
  45. console.error('❌ Error building external packages:', error);
  46. process.exit(1);
  47. }
  48. }
  49. function getOutputPath(pkg) {
  50. let pkgName;
  51. if (pkg.startsWith('alpinejs')) {
  52. pkgName = 'alpinejs';
  53. } else {
  54. pkgName = pkg.replace(/\//g, '-');
  55. }
  56. return `./web/js/dist/${pkgName}.min.js`;
  57. }
  58. // Process a CSS file
  59. async function processCSS(inputFile, outputFile) {
  60. try {
  61. await ensureDir(path.dirname(outputFile));
  62. const css = await fs.readFile(inputFile);
  63. const result = await postcss(postcssConfig.plugins).process(css, {
  64. from: inputFile,
  65. to: outputFile,
  66. });
  67. await fs.writeFile(outputFile, result.css);
  68. console.log(`✅ CSS build completed for ${inputFile}`);
  69. } catch (error) {
  70. console.error(`❌ Error processing CSS for ${inputFile}:`, error);
  71. process.exit(1);
  72. }
  73. }
  74. // Build CSS
  75. async function buildCSS() {
  76. const themesSourcePath = './web/css/src/themes/';
  77. const cssEntries = await fs.readdir(themesSourcePath);
  78. const cssBuildPromises = cssEntries
  79. .filter((entry) => path.extname(entry) === '.css')
  80. .map(async (entry) => {
  81. const entryName = entry.replace('.css', '.min.css');
  82. const inputPath = path.join(themesSourcePath, entry);
  83. const outputPath = `./web/css/themes/${entryName}`;
  84. await processCSS(inputPath, outputPath);
  85. });
  86. await Promise.all(cssBuildPromises);
  87. }
  88. // Ensure a directory exists
  89. async function ensureDir(dir) {
  90. try {
  91. await fs.mkdir(dir, { recursive: true });
  92. } catch (error) {
  93. if (error.code !== 'EEXIST') {
  94. throw error;
  95. }
  96. }
  97. }
  98. // Build all assets
  99. async function build() {
  100. console.log('🚀 Building JS and CSS...');
  101. await buildJS();
  102. await buildExternalJS();
  103. await buildCSS();
  104. console.log('🎉 Build completed.');
  105. }
  106. // Execute build
  107. build();