Is there a way to bundle multiple files into one file using `esbuild_deno_loader` and `esbuild`?

I'm trying to bundle multiple files in a single folder into one JS file that needs to end up in the static folder of Fresh. Is there a way to do that using esbuild_deno_loader and esbuild?
C
cdoremus27d ago
Thanks, Nick. I tried something like your script, but if I create an array of file paths that I want to bundle into the outfile as the entryPoints property value, esbuild says that I need to use the outDir property, not outfile. but that creates a folder of esbuild transformed files. Instead I want just one bundle file. Yes, I ended up creating a mod.ts file that exported all the other files in that folder and used it for the entryPoints, but that requires that I update mod.ts everytime I create a new file. I'd like for new files to automatically be picked up by esbuild. This is for my Web Components work with Fresh, so the normal bundling that Fresh does not work here, because I the WC file bundle needs to end up in a static folder. I'd prefer to stick with TS here too. Does your code transform TS into JS? I'm looking to transform many TS files into a single JS file. I thank you for your examples, Nick, but I'd rather not build my own way to do this. I would think that esbuild should be able to transform TS files into a single JS file. Does anybody know how to do this?
P
_Pear27d ago
tsup is a wrapper aroundn esbuild and rollup and it can output to a single file, might be what you're after? https://tsup.egoist.dev/#bundle-files
tsup
bundle typescript library with ease
M
marvinh.27d ago
The bundle: true option must be set for esbuild to bundle things into a single file. If it's not set it won't bundle
C
cdoremus27d ago
Thank you, Coby, for the suggestion. I will check that out. Thanks for your help, Marvin. I tried your suggestion, but it doesn't work for multiple input files where the outdir property needs to be used instead of outfile. In that case, bundle is ignored. Instead I went with a mod.ts file as described above.
M
marvinh.27d ago
Right yeah multiple entry points get their own bundles. The typical approach in that case is to create a virtual entry that imports all the entries you want in a single bundle
C
cdoremus26d ago
Yes, but as I explained above, it requires that I add each new Web Component file to mod.ts. I was hoping that there was an automated way to bundle all the files into the bundle rather than using mod.ts.
C
cdoremus26d ago
BTW, this is the repo containing the file Nick was referring to: https://github.com/cdoremus/fresh-webcomponents
GitHub
GitHub - cdoremus/fresh-webcomponents: Demos how to use Web Compone...
Demos how to use Web Components with Deno Fresh. Contribute to cdoremus/fresh-webcomponents development by creating an account on GitHub.
C
cdoremus24d ago
I'd prefer to skip mod.ts and just have all the WC files bundled together into wc.esm.js. It would be nice to be able to bundle by hooking into the built-in TS->JS transforms that Deno uses. I'd like to concentrate on the blog post accompanying this code for now. The most complex thing about the prototype you suggested is the TS->JS transformation which is why I'd like to hook into what Deno does. I'm not sure that adding WC deployment to Fresh 2.0 would have widespread appeal except to those like you and I that like to do Vanilla JS for the client side. Thanks Nick. I'm hoping to try this out tomorrow. Not sure. I'm sorry, but I'm busy with 'domestic activities' this week. So stay tuned.
More Posts
Deno.stdin raw map?Does anyone have a map to which key is what raw buffer gotten from `Deno.stdin`? Like i can just seaHave the Deno deploy templates disappeared?Good morning, I can't find https://dash.deno.com/new from the account dashboard panel. Are the templIPC (ZeroMQ)I want to create a service with Deno that should be callable by other (non-deno) processes running oRead child process I/OI want to write a simple Deno CLI script using `Deno.Command` or `dx` that can read output from a shCannot find name 'Deno'.ts(2304)Hello, I am using VS Code and Typescript and I have this error. I have downloaded the latest extenDeno Fresh: TypeError: 'import', and 'export' cannot be outside of moduleDeno Fresh: ```tsx // @deno-types="npm:@arcgis/core/interfaces.d.ts" import config from "npm:@arcgisEcosystem: @arcgis/corehttps://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-deno I've found an example imporKill Deno.CommandIs it possible to kill/end a `Deno.command`-instance? Example code: ```ts (async () => { let ffmBundle ts code to ts using deno emitWhen bundling code using https://deno.land/x/emit@0.38.2 it bundles into javascript but i want it toCant find name 'Deno'I want to use Deno in my type script program but when I try to use Deno it says "Cant find name 'Denrequest bodyyo. how to read request body if it's node:http server? rq.body is undefined rq.read() returns null OpenTelemetry instrumentationDid anyone have some luck making OpenTelemetry instrumentation libraries work on Deno? I've seen sImport package from Azure DevOps repositoryHi ! 👋 I'm trying to import a private package from Azure DevOps Git repository. I can't make it wHelp with deploymentHow to use Tailwind css plugins in FRESH?is it possible to use tailwind css plugins in Fresh project? if it is, how?What am I missing when conditionally styling SVGsSo I have a SVG of an arrow that only has a stroke color. I want to change this stroke color based oError in npm package - how to squelch?I'm using an npm package that I think isn't being processed for Deno correctly. I get this error: `Is there a way to handle subpath imports within a library?I'm trying to convert a library package to work with deno. Internally, the package makes a bunch ofHow to connect to a MySQL 5.0.24?I was trying to use mysql@v2.12.1 to connect to a MySQL 5.0.24 Server but it is not compatible, is tTips for deploying Deno locally?Do we have a best practice for this? I want to deploy to my LAN only for a particular site. Maybe ju