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-import-glob-array

v0.2.0

Published

Transform a directory import to individual imports represented as an array

Downloads

826

Readme

Babel Plugin Import Glob Array

A small, simple babel plugin that will convert any import path containing a glob pattern as an array of each of the fles that match the pattern. It can also import only specific exports from each file, which is useful for a set of files with multiple exports that you need to tree shake.

This plugin is similar to babel-plugin-import-glob and babel-plugin-wildcard, but with a couple significant differences: it simply imports into an array and does not attempt to determine imports names based off filenames, and it has the capability to import only specific exports from each imported module.

Installation

First, install via npm:

npm i babel-plugin-import-glob-array

Then just add it to your babel config as a plugin:

plugins: ['import-glob-array']

Usage

This package uses is-glob to detect whether a given import contains a glob pattern. If it does, it will convert the import to individual imports. For example, if you have the following import:

import pages from './pages/*'

It would be converted to something like:

import _iga from './pages/page1'
import _iga1 from './pages/page2'

let pages = [_iga, _iga1]

And if you only need a specific export, this can be accomplished as such:

import { authorData as pagesAuthors } from './pages/*'

Which would be converted as such:

import { authorData as _iga } from './pages/page1'
import { authorData as _iga1 } from './pages/page2'

let pagesAuthors = [_iga, _iga1]

You can import multiple exports as well and it will turn out as expected. You can also use the full power of minimatch in your import statements - this example is a simple glob but don't let that deter you from getting a bit more involved.

Adding Import Metadata

Sometimes it is important to know some information about where the file came from and what it was called in addition to simply the values that were exported. If this is the case, you can import the special property _importMeta to get access to this information. For example:

import { default as pages, _importMeta as metadata } from './pages/*'

Would be converted as such:

import _iga from './pages/page1'
import _iga1 from './pages/page2'

let pages = [_iga, _iga1]
let metadata = [
  {
    absolutePath: '/Users/example/project/pages/page1.js',
    importedPath: './pages/page1'
  },
  {
    absolutePath: '/Users/example/project/pages/page2.js',
    importedPath: './pages/page1'
  }
]

And of course if you need to map actual imports to their meta, the array indices will match exactly so you can do it like this:

import pages, { _importMeta as metadata } from './pages/*'

pages.map((page, idx) => {
  console.log(`export: ${page}, metadata: ${metadata[idx]}`)
})

At the moment, the metadata contains only the file path, but I am open to suggestions on other useful things that could be added.