{"library":"rucksack","title":"Rucksack JavaScript and CSS Bundler","description":"Rucksack is a JavaScript and CSS bundler built atop Vite, designed to simplify the asset bundling process for modern web applications. Currently stable at version 7.1.1, the package receives relatively frequent minor and patch updates, often aligning with new Vite releases or internal dependency bumps. Major versions, such as the transition from 6.x to 7.x, introduce significant dependency upgrades and can include breaking changes like increased Node.js version requirements. Rucksack differentiates itself by providing a streamlined, opinionated API over raw Vite configurations, allowing developers to quickly set up bundling for local and remote JavaScript and CSS assets, and automatically generate corresponding HTML markup. It aims to abstract away much of Vite's complexity while still allowing access to the underlying Vite configuration for advanced customization.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rucksack"],"cli":null},"imports":["import Rucksack from 'rucksack'","import Rucksack from 'rucksack'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import Rucksack from \"rucksack\"\nimport { fileURLToPath } from 'url';\nimport path from 'path';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nasync function runBundler() {\n  // Create a new bundler instance\n  let bundler = new Rucksack({\n      name: \"my-app\",\n      bundle_dir: `${__dirname}/output`,\n      bundle_url: \"/static\",\n      input: `${__dirname}/js-and-css-with-assets/main.js`, // Assuming this file exists for demo\n      production: true,\n      watch: false,\n      config: async (existingConfig) => {\n          // Example: Force ES module output for Rollup\n          existingConfig.build.rollupOptions = existingConfig.build.rollupOptions || {};\n          existingConfig.build.rollupOptions.output = existingConfig.build.rollupOptions.output || {};\n          existingConfig.build.rollupOptions.output.format = \"es\";\n          return existingConfig;\n      }\n  })\n\n  // Add a remote URL as a resource (e.g., jQuery CDN)\n  bundler.add(\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js\")\n\n  // Execute the bundling process\n  await bundler.bundle();\n\n  console.log(\"Bundling complete. Generated HTML markup:\");\n  console.log(bundler.html());\n\n  // Expected output (paths/sizes may vary):\n  // <script src=\"/static/my-app.js\"></script>\n  // <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js\"></script>\n  // <link rel=\"stylesheet\" href=\"/static/my-app.css\" />\n}\n\n// Create dummy input files for the example to run\nimport { promises as fs } from 'fs';\nimport { dirname } from 'path';\nimport { fileURLToPath } from 'url';\n\nconst exampleDir = path.join(__dirname, 'js-and-css-with-assets');\nconst outputFile = path.join(__dirname, 'output');\n\nasync function setupDummyFiles() {\n  await fs.mkdir(exampleDir, { recursive: true });\n  await fs.mkdir(outputFile, { recursive: true });\n  await fs.writeFile(path.join(exampleDir, 'main.js'), 'import \"./style.css\"; console.log(\"Hello from main.js\");');\n  await fs.writeFile(path.join(exampleDir, 'style.css'), 'body { background-color: #f0f0f0; }');\n}\n\nsetupDummyFiles().then(runBundler).catch(console.error);\n","lang":"javascript","description":"Demonstrates how to create a Rucksack bundler instance, configure input/output paths, add remote resources, and trigger the bundling process to generate HTML markup. Includes setup for dummy files to make the example runnable.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}