D
Deno

help

Using ESBuild with Deno

MMqx10/26/2023
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.
MMqx10/26/2023
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 ...
DAHDeno AI Helper10/26/2023
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. 🦕
DAHDeno AI Helper10/26/2023
🦕 Oops! Can you pinpoint where I went wrong to help me improve? 📈
Wweegee10/26/2023
@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.
MMqx10/26/2023
Yea but I don’t bundle… That’s the big difference For some reason ESBuild does only resolve the imports when bundling
Wweegee10/26/2023
try using fomart esm and bundle false
MMqx10/26/2023
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
ABAltair 680b10/26/2023
If not bundling, why not just use tsc?
MMqx10/26/2023
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 😅
ABAltair 680b10/26/2023
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
MMqx10/26/2023
Yea and for that I need Node… .
ABAltair 680b10/26/2023
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
MMqx10/26/2023
Hey thanks for the Feedback 👍🏻 I’ll look into this!
ABAltair 680b10/26/2023
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.
MMqx10/26/2023
Thanks 👍🏻
ABAltair 680b10/26/2023
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.
MMqx10/27/2023
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?
ABAltair 680b10/27/2023
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.
MMqx10/27/2023
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...

Looking for more? Join the community!

Recommended Posts
Multiple subdomainsHow can I listen for incoming http request on multiple subdomains?Can't upgrade request to websocketI want to use a websocket in one of my middlewares. But I keep getting an error saying I can't upgrAccess `navigator.geolocation` in deno runtimeHello, is it possible to access `navigator.geolocation` in the deno runtime?Tracking Down Lost MemoryHi, I have a long running service that creates many `JsRuntime`s over time and I have found that I `deno run` ignores @deno-types?```ts Uncaught SyntaxError: The requested module 'pg' does not provide an export named 'Pool' importWhere is my Twitter access token with Deno KV Oauth?I signed in successfully and now the Deno KV database is just storing `true`. It's not enough to intHow do I import the stripe SDK into my fresh.js projectHi there! How do I import the stripe SDK into my fresh.js project? Im struggling with my deno.json fUnable to find NPM:Rollup 4.1.4 on M1 MacHi all, hooking up a new build process for UI project, trying to use Rollup on an M1 Mac. My build How to get custom folder structure with Fresh?Hello, I want to integrate Fresh into my existing project. I want to use the 4 directories: componenFresh error: Could not fetch latest versionTotal newbie here. I'm getting "Update check failed: Could not fetch latest version." when I make a VSCode Test Debugging```json { "name": "Test", "request": "launch", "type": "node", "cwd": "$Can you recommend a mysql driver for deno that isn't a complete dead end?mysql2 port: never updated. mysql driver: doesn't support strings mysql connector from Oracle: no onHelp with Slack CLI DeploymentSorry if this has already been answered, but I am trying to deploy my Slack app and I keep getting tOrganizing dependencies in workspace with several project folderSuppose you have a workspace with several folder, and in each folder you have a deno project. What iGitHub CLI from denoIs it possible/how to use the GitHub cli (gh) from JavaScript on deno? Using the `Github cli` I'm abHow can I change the port in Fresh?I have tried the following in the Main.ts await start(manifest, { port: 3000 }), But I suspect this Alternative to react-selectHello is there some alternative to react-select with fresh? I don't find any working with preact/frHow does Fresh run esbuild on Deploy without cache writes?I'm trying to build some solidjs code during runtime, but I keep getting errors on Deploy because ofPyCharm notebooks syntax highlightHello. I have set up Deno to work with pycharm. I am able to run a jupyter server with Deno kernel swasmbuild & rust module pathI try to call some rust modules in a wasm project https://deno.com/blog/wasmbuild My tree project i