How to programmatical import module to local scope of nodejs?

Question

The code environment is browser. bundle tool is webpack. I have a router.js file like:

import foo from './views/foo.vue'
import bar from './views/bar.vue'
import zoo from './views/zoo.vue'

//use foo, bar, zoo variables

I've many '.vue' files to import like this under views folder. Is there a programmatical way to auto import all [name].vue as local variable [name]? So when I add or remove a vue file in views, I don't need to manually edit router.js file. this one seems a little dirty.

for (let name of ['foo', 'bar', 'zoo']) {
    global[name] = require(`./views/${name}.vue`)
}

Not with import - because import is processed at compile time, not run time, there is no code you can write to affect it. But since require is just a regular function you can write code to control it like you posted. It is not dirty at all. Since require is a regular function it is perfectly OK to treat it as a regular function and call it inside a loop — slebetman
– slebetman, Commented Aug 29, 2020 at 8:48

Josh Wulf · Accepted Answer · 2020-07-24 07:27:33Z

2

Nope, that's it. You have a choice between dynamic import and automation, or explicit coding and type-checking / linting.

Unfortunately, it's one or the other. The only other way to do it is meta-programming, where you write code to write your code.

So you generate the import statements in a loop like that, and write the string into the source file, and use delimiting comment blocks in the source file to identify and update it.

answered Jul 24, 2020 at 7:27

Josh Wulf

4,9122 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andre · Accepted Answer · 2020-07-24 08:22:33Z

2

The following works for me with webpack and vue. I actually use it for vuex and namespaces. Hope it helps you as well.

// imports all .vue files from the views folder (first parameter is the path to your views)
const requireModule = require.context('./views', false, /\.vue$/);

// create empty modules object
const modules = {};

// travers through your imports
requireModule.keys().forEach(item => {

  // replace extension with nothing
  const moduleName = item.replace(/(\.\/|\.vue)/g, '');
  
  // add item to modules object
  modules[moduleName] = requireModule(item).default;
});

//export modules object
export default modules;

answered Jul 24, 2020 at 8:22

Andre

4585 silver badges10 bronze badges

1 Comment

tcpiper Over a year ago

thanks. though not a direct answer, I apply your method.

Collectives™ on Stack Overflow

How to programmatical import module to local scope of nodejs?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related