CODEWITHSUNDEEP
javascriptwebpack
Hovadko
Hovadko

Reputation: 183

webpack import functions from different file

I need to import all functions from different file and use them as normal functions, just call them by their name like: helloWorld()

Basically I want to import functions from different file and use some of them in scope of this file. I know about eval() but I heard it's dangerous.

I know about two ways but none of them are perfect.

This one is bad if you have thousand functions in that functions.js file, because you have to name them all in this import.

import { doSomething } from './functions.js';

And this one is bad because you must specify prefix before all external functions.

import * as f from './functions.js';

I would like something like this

import * from './functions.js';

Where you can call functions just like this:

helloWorld();
makeMeSomeCoffee();

My goal is to share some commonly used functions across several electron windows. I want to add some modularity to my code and also abide DRY principle.

Any clue on how to achieve this?

Upvotes: 0

Views: 944

Answers (2)

Eli Huntington
Eli Huntington

Reputation: 36

If you are just bundling up your JS and not using Node as a server, I would use webpack script-loader.

You can install it via NPM, here's the docs: https://webpack.js.org/loaders/script-loader/

Upvotes: 0

chautelly
chautelly

Reputation: 467

Webpack's ProvidePlugin might be able to help you out with that.

new webpack.ProvidePlugin({
  helloWorld: ['./functions', 'helloWorld'],
  // ...
})

It does feel like overkill to me though and I'd probably stick with a destructed import.

Upvotes: 1

Related Questions