babel-plugin-bundled-import-meta
v0.3.2
Published
Babel plugin to rewrite import.meta for bundled usage
Downloads
64,782
Maintainers
Readme
babel-plugin-bundled-import-meta
Babel plugin to rewrite import.meta.url for use in bundles.
Install babel-plugin-bundled-import-meta
This module requires node.js 8 or above and @babel/core
.
npm i babel-plugin-bundled-import-meta
Usage
Add bundled-import-meta
to plugins
in your babel settings.
Settings
{
"plugins": [
["bundled-import-meta", {
"mappings": {
"node_modules": "/assets"
},
"bundleDir": "html"
}]
]
}
This example will assume that html/
will directly contain the bundled JavaScript.
node_modules/
served from /assets
. Any use of import.meta
outside these
two folders will throw an exception.
bundleDir
If no mappings match it is assumed that bundleDir
is served from the same directory
as the output bundle. In the example where bundleDir is set to html
it is assumed
that assets in html/components
will be published in ./components
relative to the
bundled JavaScript.
Default process.cwd()
.
mappings
This maps source paths to server URL's. Key's represent local source paths, values represent base URL which would be used for the unbundled build. Value URL's can be relative or absolute. Relative URL's will be resolved at runtime using the bundle URL as the base URL.
Default {}
.
importStyle
It's necessary to know the full URL of the bundle as loaded by the browser. The best way to determine this is different based on what type of bundle will be used.
Supported styles are: amd
, cjs
, esm
, iife
, umd
, system
. Default esm
.
The esm
import style generates import.meta.url
to detect the bundled URL. This
is not compatible with webpack so use another method. If anyone knows of a 'best'
option for use with webpack please open an issue or PR.
When bundling with rollup you should generally use esm
here. The only exception is
if rollup is generating an esm
bundle for targets that do not support
import.meta.url
. If you are using import.meta.url
in your code but must maintain
compatibility with browsers that do not support this it is probably best to have rollup
generate a different bundle format.
Example
See rollup-demo for a mock package showing use of this plugin with rollup.
Running tests
Tests are provided by xo and ava.
npm install
npm test
Attribution
This module is based on code found in polymer-build.
babel-plugin-bundled-import-meta
for enterprise
Available as part of the Tidelift Subscription.
The maintainers of babel-plugin-bundled-import-meta
and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. Learn more.