0

I have a shared folder that I expose as an npm module. inside that share folder I have a components folder with index.js that exports them as default:

export { default as AqMegaMenu } from "./megaMenu/AqMegaMenu.vue";
export { default as AqDetailsCard } from "./AqDetailsCard.vue";
export { default as AqDoughnutChart } from "./charts/AqDoughnutChart.vue";
...

My entry file for the library is main.js and i'd like to expose my entire components through it, so I import them in other projects like this:

import {Comp1, Comp2} from "@my/shared"

Currently I export them one by one in main.js:

export { default as AqDetailsCard } from "./components/AqDetailsCard.vue";
...

But i was wondering if there is a way to export the entire components directory using it's index.js and still be able to import it in other projects like i showed above.

Tomer
  • 16,381
  • 13
  • 64
  • 124
  • Does [this](https://stackoverflow.com/questions/29722270/is-it-possible-to-import-modules-from-all-files-in-a-directory-using-a-wildcard) answer your question? – Abhishek Kumar Tiwari Jun 24 '20 at 13:51

1 Answers1

0

You may try something like this


import camelCase from 'lodash/camelCase'
const requireModule = require.context('./components', true, /\.vue$/)
const modules = {}

requireModule.keys().forEach(filename => 
{
    const moduleName = camelCase(fileName.match(/([^\\\/]+)\.vue$/)[1]);
    modules[moduleName] = requireModule(fileName)
})
export default modules
IVO GELOV
  • 8,365
  • 1
  • 9
  • 16
  • Do i put it in main.js? would that allow me to import them like I want: `import {Comp1, Comp2}` from "@my/shared"? And how is it different from doing this: import * as modules from "./components" and then exporting it? – Tomer Jun 24 '20 at 14:56
  • `import` does not work with folders - only with files. So if you are already exporting multiple entities in `./components(whatever-extension-it-has)` - they will be available as keys inside `modules` after you do `import * as modules`. The above snippet will traverse the folder (and its subfolders) for VUE files and import them all, then export them under the `default` object. – IVO GELOV Jun 25 '20 at 05:57
  • I have an index.js file in components that exports all the modules, so doing `import * as components from './components'` will essentialy give me an object with all the components – Tomer Jun 26 '20 at 09:21
  • There is probably some misunderstanding. Obviously `import * as components from "./components/index.js"` will give all the components as an object - but your question was how to produce this object automatically rather than manually. Or am I wrong? – IVO GELOV Jun 26 '20 at 10:55
  • Read carefully, the question was how to export them from main.js so that i can import them as `import {Comp1} from @my/shared`. I don't think your solution helps me with that – Tomer Jun 26 '20 at 13:07
  • Then the correct answer is - you have to export them manually, one by one. For reference - https://javascript.info/modules-dynamic-imports – IVO GELOV Jun 26 '20 at 18:25