Mqx
Mqx14mo ago

Using ESBuild with Deno

Hey, is anyone more familiar with ESBuild? I am currently trying to transpile my Deno TypeScript project with ESBuild in JavaScript. But I don't want to bundle the files. I just want to transpile them and put them under the same path instead of src in dist. I'm currently doing the whole thing like this:
deno run -A https://deno.land/x/esbuild@v0.19.4/mod.js —target=es2022 —outdir=dist ./src/client/**
deno run -A https://deno.land/x/esbuild@v0.19.4/mod.js —target=es2022 —outdir=dist ./src/client/**
Problem with this is that it does not resolve the import paths properly. At the end there is still the .ts extension in the import. Another problem is, for example, the ESBuild tries to convert the .d.ts files into .d.js which are then simply empty.
19 Replies
Mqx
MqxOP14mo ago
Here is a more detailed issue I opened: https://github.com/evanw/esbuild/issues/3466
GitHub
[Question] How to resolve module import file extensions when transp...
Hey, I have a question about the configuration for transpiling my TS files into JS files without bundling them. For example I have this tree in my project: . ├───dist └───src └───client │ index.ts ...
Deno AI Helper
Deno AI Helper14mo ago
The documentation does not provide explicit information on how to use ESBuild with Deno. However, it does mention that deno bundle has been deprecated and recommends using tools like deno_emit, esbuild, or rollup instead. As for your specific issue, it seems like you're encountering problems with ESBuild not resolving import paths correctly and trying to convert .d.ts files into .d.js files. Unfortunately, the documentation does not provide a clear solution to these issues. You might want to consider using dnt (Deno to Node transform), a build tool mentioned in the documentation that transforms Deno modules into Node.js/npm-compatible packages. It rewrites Deno’s extensioned module specifiers to ones compatible with Node.js module resolution and handles TypeScript files appropriately. However, it's important to note that this tool is designed for preparing Deno modules for publication on npm, and might not suit your exact use case. For more specific advice on using ESBuild with Deno, you might want to refer to ESBuild's own documentation or seek advice from the Deno or ESBuild communities. 🦕
Deno AI Helper
Deno AI Helper14mo ago
🦕 Oops! Can you pinpoint where I went wrong to help me improve? 📈
weegee
weegee14mo ago
@Mqx I use these params for my js project in deno bundeled for web https://github.com/dusk-network/dusk-wallet-js/blob/main/build.js resolves imports
GitHub
dusk-wallet-js/build.js at main · dusk-network/dusk-wallet-js
JavaScript library for rusk-wallet. Contribute to dusk-network/dusk-wallet-js development by creating an account on GitHub.
Mqx
MqxOP14mo ago
Yea but I don’t bundle… That’s the big difference For some reason ESBuild does only resolve the imports when bundling
weegee
weegee14mo ago
try using fomart esm and bundle false
Mqx
MqxOP14mo ago
Is there a CLI flag for format? I cannot find it in the options Does not make a difference… I think it has something to do with the ** that I use as selector But I’m not sure
Fifth-Normal-Form always
If not bundling, why not just use tsc?
Mqx
MqxOP14mo ago
Because I use Deno not node… And I also think ESBuild is faster Honestly I don’t want any Node dependencies in this project… That’s why I was trying to use ESBuild And I mean ESBuild works fine except for this 😅
Fifth-Normal-Form always
I'f you use VS Code, TSC is included, no cost. TSC isTypescripts compiler. You just need a tsconfig.json file. Yes esbuild is much faster, but tsc is fast enough. I was wrong again. tsc is not included with VS Code. You simply install it globally one time
npm install -g typescript
npm install -g typescript
Mqx
MqxOP14mo ago
Yea and for that I need Node… .
Fifth-Normal-Form always
So, you don't have node nor npm on your system? The above install does not add any node project files or dependencies. It just installs Typescript and TSC globally. @Mqx Like you, I don't code client-side with anything other than Deno-TS. I use a dev server that auto-bundles (esbuild) to a single bundle.js, Any change to /srs/ auto-bundles and refreshes the app in the browser. You may want to have a look; https://github.com/nhrones/Hot Hot currently uses an opinionated configuration. You could choose to create a repo and change anything you wish. Have a look at the /dist/bundle.js/ file in the above linked repo. See how easy it is to read. I have esbuild not rename anything. Here's an example of a larger bundle: https://github.com/nhrones/BuenoCache/blob/main/dist/bundle.js
Mqx
MqxOP14mo ago
Hey thanks for the Feedback 👍🏻 I’ll look into this!
Fifth-Normal-Form always
A big advantage is that the bundle is very efficient as long as it does not get too big. All modules are digested to a single module. Each module is still identified with a comment in the bundle. By the way. The BeunoCache link above is an interesting Client-side study. There 's a link in the readme to run it. Pure html/css with vanilla js is extremely performant! And, its a pleasure to build it all in plain-old Deno-ts.
Mqx
MqxOP14mo ago
Thanks 👍🏻
Fifth-Normal-Form always
By the way. I've NEVER used node in my long coding life (50+ years). Don't get me wrong, I've studied it quite a bit. I just don't like anything about it. I'm sorry Deno decided to absorb node.
Mqx
MqxOP14mo ago
Same, I’ve never used it because of the complicated ecosystem. There was no system for me. Sometimes it was node run sometimes npx I never understood it. But nevertheless, to come back to my previous problem. I think I found a solution to my problem. The initial reason why I didn’t want to bundle my files was because if I have multiple subpages I don’t want to bundle all of them together into a single bundle. But I just realized that I can use multiple entry points. I have an other question is there a reason for changing var to let/const in the minified bundle? And also, is there a way to copy my HTML files to the dist directory under the same path?
Fifth-Normal-Form always
The bundler only changes imports to vars, so that it is just one module. It keeps other let and const. I usually keep the html and css in /dist/. In the case where I want to serve from Github-Pages, I need the index.html in the root.
Mqx
MqxOP14mo ago
I have currently opened an issue for the cp command for coping the .html files. https://github.com/denoland/deno_task_shell/issues/95
GitHub
Deno task cp wildcard does not work correctly · Issue #95 · denol...
Hey, I want to recursively copy all .html files from ./src/client/ to ./dist/. For this I wanted to use the following task command: cp -r ./src/client/*/.html ./dist/ This command should normally...