npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

babel-plugin-bundled-import-meta

v0.3.2

Published

Babel plugin to rewrite import.meta for bundled usage

Downloads

64,782

Readme

babel-plugin-bundled-import-meta

Travis CI Greenkeeper badge NPM Version NPM Downloads BSD-3-Clause

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.