weegee•14mo ago

How to bundle my project

I have a mod.js file that I wrote with Deno and I want to bundle it and it depends on bunch of other file I ran esbuild mod.js --bundle --format=esm --outdir=dist and I try to use that in the browser but it doesn't download the dependecies

13 Replies

Deno AI Helper•14mo ago

According to the documentation, the deno bundle command has been deprecated and it's recommended to use alternatives like deno_emit, esbuild, or rollup. However, it's important to note that the output of deno bundle is intended for consumption in Deno and not for use in a web browser or other runtimes. Depending on the input, it may work in other environments, but if you wish to bundle for the web, the documentation recommends other solutions such as esbuild. If you're having issues with esbuild not downloading the dependencies, it might be because esbuild doesn't handle dependency management like a package manager would. It only bundles the code that's directly imported in your files. If your dependencies aren't being included, it might be because they're not being directly imported in your code. If you're looking to create a bundle that includes all dependencies, you might want to consider using a tool like rollup or webpack which have more advanced code-splitting and tree-shaking capabilities. Remember, the information I provided about esbuild not downloading dependencies isn't in the documentation, it's general advice based on common bundling practices. 🦕

Helpful Links: deno bundle | Manual | Deno dnt — the easiest way to publish a hybrid npm module for ESM and CommonJS Migrate from Node | Manual | Deno wasmbuild - Using Rust in Deno and Web Apps

Alex Jeffcott•14mo ago

I wish that Deno would officially support a working out-of-the-box solution to bundling which would work for 'just Deno' and for web applications. That developers new to Deno would have to spend any time at all writing or debugging esbuild plugins for a new project is absurdly off-putting. I some how get the impression that people want to wait around for import assertions to be fleshed out…

Leokuma•14mo ago

They said that bundling is not as trivial as it looks and decided to let it to userland Have a look at this module:

Leokuma•14mo ago

https://packup.deno.dev/

Packup

📦 Zero-config web application packager for Deno 🦕

weegeeOP•14mo ago

@Leokuma How would I use it to package my js project into a js file I have this as my build.js

import { esbuild, cache, load } from "./deps.js";

const importMap = { imports: {} };
const env = await load({ export: true });

let envVariables = {};

for (const [key, value] of Object.entries(env)) {
  // That's how esbuild likes it
  envVariables["process.env." + key] = `"${String(value)}"`;
}

console.log("Bundling..");

esbuild
  .build({
    entryPoints: ["src/mod.js"],
    bundle: true,
    format: "esm",
    outfile: "dist/wallet.js",
    plugins: [cache({ importMap, directory: "./cache" })],
    define: envVariables,
  })
  .then(() => {
    console.log("Bundling Completed");
    esbuild.stop();
  })
  .catch((e) => console.log("Error occured while bundling library: " + e));

import { esbuild, cache, load } from "./deps.js";

const importMap = { imports: {} };
const env = await load({ export: true });

let envVariables = {};

for (const [key, value] of Object.entries(env)) {
  // That's how esbuild likes it
  envVariables["process.env." + key] = `"${String(value)}"`;
}

console.log("Bundling..");

esbuild
  .build({
    entryPoints: ["src/mod.js"],
    bundle: true,
    format: "esm",
    outfile: "dist/wallet.js",
    plugins: [cache({ importMap, directory: "./cache" })],
    define: envVariables,
  })
  .then(() => {
    console.log("Bundling Completed");
    esbuild.stop();
  })
  .catch((e) => console.log("Error occured while bundling library: " + e));

Leokuma•14mo ago

oh wait I just realized... Not everything from the Standard Library can run in the browser. For example, you're using dotenv, which doesn't work in the browser. So even if you bundle it correctly, it still probably won't work

weegeeOP•14mo ago

yea I have Deno in my code

weegeeOP•14mo ago

Should I just switch to node ?

Leokuma•14mo ago

you will have the same problem with Node if you use Node-specific APIs like fs for example if you want your module to be browser-compatible, ideally you should get rid of all those APIs and use Web APIs only there are solutions (eg Browserify) that can turn Node code into browser-compatible code, but they are limited, they don't always work

weegeeOP•14mo ago

I don't get where I'm using Deno std lib anywhere in my code, the only place i use dotenv is in the build.js

Leokuma•14mo ago

run deno info mod.js. It should show you

weegeeOP•14mo ago

That fixed it I just moved esbuild deps from the deps.js which I use in my code to build.js