Generate ES Module import maps from package.json dependencies for native browser module loading
npm install @bobfrankston/importgenbash
npm install -g @bobfrankston/importgen
`
Usage
In a directory with package.json and index.html:
`bash
Generate once
importgen
Watch for package.json changes
importgen -w
`
Automatic Generation with VS Code Tasks
Add to .vscode/tasks.json:
`json
{
"version": "2.0.0",
"tasks": [
{
"label": "importgen: watch",
"type": "shell",
"command": "importgen",
"args": ["-w"],
"runOptions": {
"runOn": "folderOpen"
},
"isBackground": true
}
]
}
`
How It Works
1. Reads package.json dependencies
2. Recursively resolves all transitive dependencies
3. Handles file: protocol dependencies and npm packages
4. Detects and avoids circular dependencies
5. Resolves correct entry points using exports, module, or main fields
6. Generates import map with relative paths from HTML location
7. Injects or updates
Note: The tool automatically resolves transitive dependencies and handles both npm packages and file:` protocol dependencies.