rucksack

import Rucksack from "rucksack" import { fileURLToPath } from 'url'; import path from 'path'; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); async function runBundler() { // Create a new bundler instance let bundler = new Rucksack({ name: "my-app", bundle_dir: `${__dirname}/output`, bundle_url: "/static", input: `${__dirname}/js-and-css-with-assets/main.js`, // Assuming this file exists for demo production: true, watch: false, config: async (existingConfig) => { // Example: Force ES module output for Rollup existingConfig.build.rollupOptions = existingConfig.build.rollupOptions || {}; existingConfig.build.rollupOptions.output = existingConfig.build.rollupOptions.output || {}; existingConfig.build.rollupOptions.output.format = "es"; return existingConfig; } }) // Add a remote URL as a resource (e.g., jQuery CDN) bundler.add("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js") // Execute the bundling process await bundler.bundle(); console.log("Bundling complete. Generated HTML markup:"); console.log(bundler.html()); // Expected output (paths/sizes may vary): // <script src="/static/my-app.js"></script> // <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> // <link rel="stylesheet" href="/static/my-app.css" /> } // Create dummy input files for the example to run import { promises as fs } from 'fs'; import { dirname } from 'path'; import { fileURLToPath } from 'url'; const exampleDir = path.join(__dirname, 'js-and-css-with-assets'); const outputFile = path.join(__dirname, 'output'); async function setupDummyFiles() { await fs.mkdir(exampleDir, { recursive: true }); await fs.mkdir(outputFile, { recursive: true }); await fs.writeFile(path.join(exampleDir, 'main.js'), 'import "./style.css"; console.log("Hello from main.js");'); await fs.writeFile(path.join(exampleDir, 'style.css'), 'body { background-color: #f0f0f0; }'); } setupDummyFiles().then(runBundler).catch(console.error);