weegee
weegee8mo 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
No description
13 Replies
Deno AI Helper
Deno AI Helper8mo 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. 🦕
Alex Jeffcott
Alex Jeffcott8mo 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
Leokuma8mo 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
Leokuma8mo ago
Packup
📦 Zero-config web application packager for Deno 🦕
weegee
weegee8mo 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
Leokuma8mo 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
weegee
weegee8mo ago
yea I have Deno in my code
weegee
weegee8mo ago
No description
weegee
weegee8mo ago
Should I just switch to node ?
Leokuma
Leokuma8mo 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
weegee
weegee8mo 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
Leokuma8mo ago
run deno info mod.js. It should show you
weegee
weegee8mo ago
That fixed it I just moved esbuild deps from the deps.js which I use in my code to build.js