Title: Support for Import Maps · Issue #49443 · nodejs/node · GitHub
Open Graph Title: Support for Import Maps · Issue #49443 · nodejs/node
X Title: Support for Import Maps · Issue #49443 · nodejs/node
Description: I was hoping to start the conversation around getting Import Map support into core. I figured starting here with a proposal was better than starting right off with a PR. What Are Import Maps This proposal allows control over what URLs ge...
Open Graph Description: I was hoping to start the conversation around getting Import Map support into core. I figured starting here with a proposal was better than starting right off with a PR. What Are Import Maps This p...
X Description: I was hoping to start the conversation around getting Import Map support into core. I figured starting here with a proposal was better than starting right off with a PR. What Are Import Maps This p...
Opengraph URL: https://github.com/nodejs/node/issues/49443
X: @github
Domain: github.com
{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Support for Import Maps","articleBody":"I was hoping to start the conversation around getting [Import Map](https://github.com/WICG/import-maps) support into core. I figured starting here with a proposal was better than starting right off with a PR.\r\n\r\n## What Are Import Maps\r\n\r\n\u003e This proposal allows control over what URLs get fetched by JavaScript import statements and import() expressions. This allows \"bare import specifiers\", such as import moment from \"moment\", to work.\r\n\r\nThe proposal was mainly targeted at browsers where URL imports have many downsides without bare specifier support. It enables a standardized map file format to be used when resolving import specifiers, giving developers more control of the behavior of import statements.\r\n\r\nHere is an example of the format:\r\n\r\n```json\r\n{\r\n \"imports\": {\r\n \"todayis\": \"node_modules/todayis/index.js\"\r\n },\r\n \"scopes\": {\r\n \"node_modules/todayis\": {\r\n \"english-days\": \"node_modules/english-days/index.json\"\r\n }\r\n }\r\n}\r\n```\r\n\r\nProposal link: https://github.com/WICG/import-maps\r\n\r\n## Why should they be supported in Node.js?\r\n\r\nCurrently we use the structure of the filesystem and a resolution algorithm to map import specifiers to files. These files are typically installed by a package manager in a structure which the Node.js resolution algorithm knows how to resolve. This has some drawbacks:\r\n\r\n1. It is slow\r\n2. It can lead to unexpectedly resolving modules\r\n - if you have a `node_modules` at your filesystem root for example\r\n - if your package manager has hoisted a transitive dep and you access it from the top level\r\n3. Tools are required to implement copies of the Node.js resolution logic\r\n4. Users and package managers jump through hoops to try and make the filesystem performant\r\n\r\nIf we had import maps we could circumvent most of this. Package mangers can generate an import map, enabling perf improvements and simplicity in their implementations. It increases startup performance of apps because they don't have to do as much filesystem access.\r\n\r\nOne interesting example of what import maps enables is filesystem structure independent workspaces (think yarn workspaces but without the requirement of the modules being under the same root directory).\r\n\r\n## Implementation\r\n\r\nAs an example implementation I created this gist:\r\n\r\nhttps://gist.github.com/wesleytodd/4399b2351c59438db19a8ffb1f3fcdca\r\n\r\nTo run it:\r\n\r\n```\r\n$ git clone git@gist.github.com:4399b2351c59438db19a8ffb1f3fcdca.git hello-today\r\n$ cd hello-today\r\n$ npm it\r\n```\r\n\r\nThis uses an experimental loader which loads an `importmap.json` and falls back to the original filesystem lookup if it fails. I am also pretty sure this very naive implementation is missing edge cases, but in these simple cases it appears to work.\r\n\r\nObviously for support in core we would not use a loader, but I think the rest would be similar. Open questions I have are:\r\n\r\n**Where would node find the `importmap.json`?**\r\n\r\nMy first idea is at `node_modules/importmap.json`. I think this would be expected behavior from users if their package managers started writing this file.\r\n\r\n**How would users override the `importmap.json`?**\r\n\r\nFor this I think a reasonable approach would be a cli flag (`--importmap`) and a package.json (`\"importmap\": \"./importmap.json\"`) field.\r\n\r\n**Do we want to wait for browsers to standardize import maps?**\r\n\r\nhttps://github.com/nodejs/node/issues/49443\r\n\r\nI think that this is a very valid concern. Is there a way to help push that forward? The benefits are pretty large in node IMO, and it would superseded all the work currently being done on yarn pnp and npm 8. If we let those go forward but then this spec lands it might be even worse for shifting the community.\r\n\r\nCould we release it as flagged \u0026 experimental until browsers standardize? This would mean users could opt in, but as it changed we could follow along.\r\n\r\n---\r\n\r\nThoughts? Next steps?","author":{"url":"https://github.com/wesleytodd","@type":"Person","name":"wesleytodd"},"datePublished":"2020-01-24T04:20:15.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":129},"url":"https://github.com/49443/node/issues/49443"}
| route-pattern | /_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format) |
| route-controller | voltron_issues_fragments |
| route-action | issue_layout |
| fetch-nonce | v2:9881a5cf-d909-44a2-8f42-b1652f6ca7c7 |
| current-catalog-service-hash | 81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114 |
| request-id | AF52:3D1E26:11DA44F:17BB1FF:6A4C5EF3 |
| html-safe-nonce | 7c88495bb3a33c6b49069fc74df212715bd806893746d3c96d22c51e759d5208 |
| visitor-payload | eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJBRjUyOjNEMUUyNjoxMURBNDRGOjE3QkIxRkY6NkE0QzVFRjMiLCJ2aXNpdG9yX2lkIjoiNTAxNTA1NzU5NzYyMDU3NTk4NyIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9 |
| visitor-hmac | 4050f4d4d0b97b36743f75d40869fcfbffa49d48a870af75683cbd9856fbe4bf |
| hovercard-subject-tag | issue:1878156296 |
| github-keyboard-shortcuts | repository,issues,copilot |
| google-site-verification | Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I |
| octolytics-url | https://collector.github.com/github/collect |
| analytics-location | / |
| fb:app_id | 1401488693436528 |
| apple-itunes-app | app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/nodejs/node/49443/issue_layout |
| twitter:image | https://opengraph.githubassets.com/e4a0551a0550f56724bd459eea2b498c0dbea8db06945e2c08412dbe0188dc00/nodejs/node/issues/49443 |
| twitter:card | summary_large_image |
| og:image | https://opengraph.githubassets.com/e4a0551a0550f56724bd459eea2b498c0dbea8db06945e2c08412dbe0188dc00/nodejs/node/issues/49443 |
| og:image:alt | I was hoping to start the conversation around getting Import Map support into core. I figured starting here with a proposal was better than starting right off with a PR. What Are Import Maps This p... |
| og:image:width | 1200 |
| og:image:height | 600 |
| og:site_name | GitHub |
| og:type | object |
| og:author:username | wesleytodd |
| hostname | github.com |
| expected-hostname | github.com |
| None | 3d11bb817438277de2a940854450e83a7d32b6aeb5014e9e6b00a6423900251c |
| turbo-cache-control | no-preview |
| go-import | github.com/nodejs/node git https://github.com/nodejs/node.git |
| octolytics-dimension-user_id | 9950313 |
| octolytics-dimension-user_login | nodejs |
| octolytics-dimension-repository_id | 27193779 |
| octolytics-dimension-repository_nwo | nodejs/node |
| octolytics-dimension-repository_public | true |
| octolytics-dimension-repository_is_fork | false |
| octolytics-dimension-repository_network_root_id | 27193779 |
| octolytics-dimension-repository_network_root_nwo | nodejs/node |
| turbo-body-classes | logged-out env-production page-responsive |
| disable-turbo | false |
| browser-stats-url | https://api.github.com/_private/browser/stats |
| browser-errors-url | https://api.github.com/_private/browser/errors |
| release | 14099438da5379150f15a2892474c7c7e6c0e55e |
| ui-target | canary-2 |
| theme-color | #1e2327 |
| color-scheme | light dark |
Links:
Viewport: width=device-width