Importers

JSON Importers

JSON importers are a simple but effective alternative to writing a whole esbuild plugin just to fix an import issue.

All you have to do is to place your .json file in the importers/ folder, and it will be loaded under the namespace simple-importer:name-of-plugin.

{ "module": "bootstrap-icons"
, "resolve_filter": "/bootstrap-icons\\.(?:woff|ttf|otf)/"
, "load_filter": "/bootstrap-icons\\.(?:woff|ttf|otf)/"
, "import_path": "bootstrap-icons/font/"
, "zipfs_path": "~bootstrap-icons/font/fonts/bootstrap-icons"
, "lookup":
	[ ".woff2"
	, ".woff"
	, ".otf"
	, ".ttf"
	]
, "loader": "dataurl"
}

This is the example bootstrap-icons fonts importer I created. Without this, the chain would fail because SASS will require a tilde-prefixed module import which cannot be resolved in the build context.

The filters work exactly like esbuild. This is useful for more complex plugin chains.

The lookup field must be an array of extensions prefixed by the dot.

The contents of the file specified in zipfs_path is loaded raw and then is passed to the specified loader like esbuild would normally do.

You can see here the list of supported loader types: https://esbuild.github.io/content-types/

Regular importers

Regular importers are just regular esbuild plugins you place in the importers directory. They will be automatically loaded by simple-importer.js. The name of the plugin will be simple-importer because this loader is only being used to fix import urls, so I'd recommend to edit the namespace of your plugin. If you need your plugin to have a more complex behavior, I'd advice to write a regular plugin and load it in the plugin array inside builder.js.

export default function setup(build) {
  build.onResolve( /* ... */ );
  
  // ...
  
  build.onLoad( /* ... */ );
}

This is a dummy example of what the plugin should look like. The build parameter here is the context provided by esbuild in the setup phase.