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:
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
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 ...
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. 🦕🦕 Oops! Can you pinpoint where I went wrong to help me improve? 📈
@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.
Yea but I don’t bundle…
That’s the big difference
For some reason ESBuild does only resolve the imports when bundling
try using fomart esm and bundle false
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 sureIf not bundling, why not just use tsc?
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 😅
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
Yea and for that I need Node…
.
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
Hey thanks for the Feedback 👍🏻 I’ll look into this!
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.
Thanks 👍🏻
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.
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?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.
I have currently opened an issue for the
cp command for coping the .html files. https://github.com/denoland/deno_task_shell/issues/95GitHub
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...