Import all files in directory without having to explicitly specify each file

Question

I want to import all components that reside in a folder. Is there a way to do this without having to create an index.js file and individually importing and then exporting each component? Is there a bulk way?

Folder structure:

src/templates/
             Foo.vue
             Bar.vue
             Baz.vue
src/App.vue

In App.vue I would like to import all components in templates folder:

import * as Templates from './templates'

The above doesn't work unless I place an index.js file in ./templates folder:

// Do I have to import each component individually?
// Can I just bulk import all these?

import Default from './Default'
import Home from './Home'
import Agency from './Agency' 
import CaseStudies from './CaseStudies'
import Contact from './Contact'

export {
    Default,
    Home,
    Agency,
    CaseStudies,
    Contact
}

Answer 1

You can do bulk import

import { Default, Home, Agency, CaseStudies, Contact } from "./templates/*";

with babel-plugin-wildcard

.babelrc

  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["wildcard", {
      "exts": ["js", "es6", "es", "jsx", "javascript", "vue"]
    }]
  ],