How to define local import maps?

I got these things in the tests above:

import { assertAlmostEquals, assertEquals } from "@std/assert";
import { Vector2 } from "../src/math/mod.ts";
import { QUARTER_PI } from "../src/utils/math.util.ts";

import { assertAlmostEquals, assertEquals } from "@std/assert";
import { Vector2 } from "../src/math/mod.ts";
import { QUARTER_PI } from "../src/utils/math.util.ts";

Notice how I have to do a lot of ./ js to get to the next? I understand there'st the "imports": {}" support in deno.json(c), and I do remember using smth like Bun's package.json's "workspace": [] system to create localised @one/two, complete with index.ts in their respective folders for exports. Are there are examples on defining local import maps?

22 Replies

Deno AI Helper•7mo ago

To define local import maps in Deno, you can use the importMap field in your deno.json or deno.jsonc configuration file. Import maps allow you to create aliases for your module paths, which can simplify imports in your project and avoid the repetitive use of relative paths like ./ and ../. Here's a step-by-step guide on how to define local import maps based on the documentation: 1. Create a deno.json or deno.jsonc file in the root of your project if you don't already have one. 2. Inside the configuration file, add an importMap field with the path to your import map file. For example:

   {
     "importMap": "./import_map.json"
   }

   {
     "importMap": "./import_map.json"
   }

3. Create an import_map.json file (or whatever you named it in the previous step) in your project. 4. Define your import map by specifying the aliases and the corresponding paths. For example:

   {
     "imports": {
       "@std/": "https://deno.land/std/",
       "@utils/": "./src/utils/",
       "@math/": "./src/math/"
     }
   }

   {
     "imports": {
       "@std/": "https://deno.land/std/",
       "@utils/": "./src/utils/",
       "@math/": "./src/math/"
     }
   }

5. Now, you can use these aliases in your imports. For instance:

   import { assertAlmostEquals, assertEquals } from "@std/assert";
   import { Vector2 } from "@math/mod.ts";
   import { QUARTER_PI } from "@utils/math.util.ts";

   import { assertAlmostEquals, assertEquals } from "@std/assert";
   import { Vector2 } from "@math/mod.ts";
   import { QUARTER_PI } from "@utils/math.util.ts";

6. When running your Deno commands, make sure to include the --importmap flag followed by the path to your import map file. For example:

   deno run --importmap=import_map.json your_script.ts

   deno run --importmap=import_map.json your_script.ts

The documentation also mentions that the deno.json file is auto-discovered and acts, among other things, as an import map. This means that once you have your deno.json and import map file set up, Deno will automatically use the import map when resolving module imports. Remember that the import map file

Deno AI Helper•7mo ago

must be a valid JSON file and follow the import map specification. 🦕 If you need more specific examples or further clarification, the documentation provides detailed information on how to use import maps in Deno.

Helpful Links: ECMAScript Modules in Deno | Deno Docs Importing & Exporting - Deno by Example Deno Runtime Quick Start | Deno Docs Importing JSON - Deno by Example Why We Added package.json Support to Deno deno.json configuration file Import Maps

KawaxteOP•7mo ago

it worked by js putting my own things in

        "@xtengine/math": "./src/math/mod.ts"

        "@xtengine/math": "./src/math/mod.ts"

Doctor 🤖•7mo ago

Idk why it said to make an external import map file when using imports in deno.json works just fine.

KawaxteOP•7mo ago

Yeah, I know about the standard new one I did js that I didn't think you could js do it like that Would be nice to be able to define esbuild as an import map though... Has errors if I do, so I have to use deps.ts

Doctor 🤖•7mo ago

? I have no problems including esbuild in the imports.

KawaxteOP•7mo ago

Which url variant?

Doctor 🤖•7mo ago

"esbuild": "npm:esbuild"

"esbuild": "npm:esbuild"

KawaxteOP•7mo ago

esh variant complains about "declare as export" Ach, but that creates a node_modules, no?

Doctor 🤖•7mo ago

You don't see one in the project.

KawaxteOP•7mo ago

so it'st hidden?

Doctor 🤖•7mo ago

I'm pretty sure it's creating one in the same place its caching other stuff

KawaxteOP•7mo ago

ach so was rly hoping to be able to use denoland's variant directly as an import map Which I'm currently using in deps

Doctor 🤖•7mo ago

I've more or less abandoned denoland since JSR came out But not everything is on JSR so I just resort to npm if it's not.

KawaxteOP•7mo ago

Where do you check for jsrs?

Doctor 🤖•7mo ago

Have you not heard of JSR?

Doctor 🤖•7mo ago

https://jsr.io/

JSR: the JavaScript Registry

JSR is the open-source package registry for modern JavaScript. JSR natively supports TypeScript, and works with all JS runtimes and package managers.

KawaxteOP•7mo ago

nnnnope I'm relatively new to the -script system

Doctor 🤖•7mo ago

Deno moved to it a while ago now

KawaxteOP•7mo ago

I see I initially came from Bun

Doctor 🤖•7mo ago

They came out with JSR to solve a few problems that existed with NPM and https imports The problem with NPM is that it hasn't been updated in ages to handle the modern way we write and consume code these days, often making you jump through hoops to not only publish code there, but also consume code. The problem with https imports is deduplication. When different libraries depend on different but similar versions of the same dependency, with https imports you'd have duplicate code, but with JSR they can serve you one version that is compatible with both.

KawaxteOP•7mo ago

I don't know anything about that but I trust you in this, so I'll js move what I have to jsr when I can.

How to define local import maps?

Did you find this page helpful?