class AssetPipeline::ImportMap
- AssetPipeline::ImportMap
- Reference
- Object
Overview
The ImportMap is the main way that javascript is handled. This is a no-bundle approach using the "import map" browser standard.
The ImportMap supports several features that are provided by the import map specification:
- imports: this is a url that can be relative to your application, or a full CDN path to an esm module
- scopes: this is a feature that can help rescrict which librarys are loaded. The keys here are relative paths in your application.
- preloading: any import that's added with
preload: truewill also render a tag to have the module preloaded
Defined in:
import_map/import_map.crConstructors
-
.new(name : String = "application")
Set the name of the import map during initialization.
Instance Method Summary
-
#add_import(name : String, to : String, preload : Bool = false)
Name the library you want to incude in the import map.
-
#add_scope(scope : String, name : String, to : String)
Add a scope to your import map.
-
#build_import_map_json : String
Generates the valid import json.
-
#build_import_map_tag : String
This renders the complete HTML tag for the import map, including the modulepreload tags required.
-
#name : String
The name of your import map.
-
#name=(name : String)
The name of your import map.
Constructor Detail
Set the name of the import map during initialization. The default is application
Instance Method Detail
Name the library you want to incude in the import map.
import("lodash", "https://cdn.jsdelivr.net/npm/lodash/lodash.min.js")Adding preload will mark the module to be eager loaded by the browser.
import("lodash", "https://cdn.jsdelivr.net/npm/lodash/lodash.min.js", preload: true)The #name should match the way you import a class in your JS code.
The to parameter is the full path and name of file or the full CDN url to an ESM module.
Think of it like this: you are importing the class #name associated to a library file path.
Add a scope to your import map. Scopes are paths relative to your application.
To learn how to use scopes, read about import maps and scopes here
Generates the valid import json. This can be used in a .json file or a <script type="importmap"> tag.
This renders the complete HTML tag for the import map, including the modulepreload tags required.
Use this method to render the full import map into an HTML view.