{"id":15709,"library":"mowdown","title":"mowdown: HTML, CSS, and JS Production Bundler","description":"Mowdown is a lightweight, standalone JavaScript bundler designed for straightforward production preparation of web applications. Currently at version 2.2.2, it provides a minimal approach to consolidating and optimizing HTML, CSS, and JavaScript assets without requiring complex build configurations or a persistent local server process. The tool operates by scanning specified HTML files, identifying local CSS and JavaScript references (via `` and `\n\n`;\nconst cssContent = `body { font-family: 'Arial', sans-serif; background-color: #e0f2f7; } h1 { color: #0277bd; text-align: center; }`;\nconst jsContent = `document.addEventListener('DOMContentLoaded', () => {\n console.log('JavaScript processed by mowdown!');\n const heading = document.querySelector('h1');\n if (heading) heading.textContent = 'Mowdown has bundled this content!';\n});`;\n\nfs.writeFileSync(path.join(inputDir, 'index.html'), htmlContent);\nfs.writeFileSync(path.join(inputDir, 'style.css'), cssContent);\nfs.writeFileSync(path.join(inputDir, 'script.js'), jsContent);\n\n// Define a minimal .babelrc required by mowdown\nconst babelrcContent = `{ \"presets\": [\"@babel/preset-env\"] }`;\nfs.writeFileSync(path.join(__dirname, '.babelrc'), babelrcContent);\n\nasync function runBundler() {\n try {\n console.log('Running mowdown bundling process...');\n await mowdown([path.join(inputDir, 'index.html')], outputDir, {\n sourceFolder: inputDir,\n isOverwritingHtml: false // Crucial to avoid overwriting original source HTML\n });\n console.log(`\n✅ Mowdown finished successfully. Check '${outputDir}' for bundled files.`);\n \n // Optional: Verify bundled HTML content\n const bundledHtmlPath = path.join(outputDir, 'index.html');\n if (fs.existsSync(bundledHtmlPath)) {\n const bundledHtmlSnippet = fs.readFileSync(bundledHtmlPath, 'utf-8').substring(0, 500) + '...';\n console.log('\\nBundled index.html snippet:\\n', bundledHtmlSnippet);\n }\n } catch (error) {\n console.error('\\n❌ Mowdown failed:', error.message);\n } finally {\n // Clean up temporary files and directories\n fs.rmSync(inputDir, { recursive: true, force: true });\n fs.rmSync(outputDir, { recursive: true, force: true });\n fs.rmSync(path.join(__dirname, '.babelrc'), { force: true });\n console.log('\\nCleaned up temporary files and directories.');\n }\n}\n\nrunBundler();","lang":"javascript","description":"This quickstart demonstrates how to use `mowdown` to bundle and minify HTML, CSS, and JavaScript files from a source directory into an output directory. It creates temporary input files and a minimal `.babelrc` (which mowdown requires), then processes them and cleans up, showcasing basic API usage with options like `sourceFolder` and `isOverwritingHtml`."},"warnings":[{"fix":"For any CDN-hosted CSS links, include their full URLs in both the `excludeCss` and `prependCssUrls` arrays within the options object passed to the `mowdown` function.","message":"Mowdown implicitly assumes all CSS files referenced in HTML are local. If you are using a CDN-hosted CSS file, you must explicitly add it to both the `excludeCss` and `prependCssUrls` options. Failure to do so can lead to build errors, incorrect paths, or missing styles in the bundled output.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Create a `.babelrc` file in your project root. A minimal configuration like `{ \"presets\": [\"@babel/preset-env\"] }` is often sufficient, or you can copy the example from the mowdown repository if you need more specific Babel functionality.","message":"A `.babelrc` configuration file is required in the root directory for mowdown to correctly process JavaScript files, even if the `isUsingBabel` option is set to `false` or if you don't intend to use Babel transformations. Its absence will lead to errors during the bundling process.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always specify a separate `outputFolder` that is distinct from your source HTML files' location, or explicitly set `isOverwritingHtml: false` in the options object passed to the `mowdown` function to ensure original files are preserved.","message":"The `isOverwritingHtml` option defaults to `true`. This means if you do not specify a distinct `outputFolder` or if `outputFolder` is the same as your input HTML file's directory, mowdown will overwrite your original HTML files with the bundled versions. This can lead to accidental data loss.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure a `.babelrc` file exists in your project's root directory. Even a basic configuration like `{ \"presets\": [\"@babel/preset-env\"] }` is required. Verify that necessary Babel packages are available in mowdown's internal dependencies or your project's `node_modules` if you're running locally.","cause":"Mowdown relies on Babel for JavaScript processing, and a `.babelrc` file is missing or misconfigured in the project root.","error":"Error: Cannot find module '@babel/core' (or similar Babel-related error)"},{"fix":"Double-check the paths specified in your HTML `