We Keep Coding

How to properly import module in javascript with webpack

I've got a file my-class.js
class MyClass {
constructor(container) {
const myElements = container.querySelectorAll(".class");
for (const myElement of myElements) {
myElement.addEventlistener("click", this.doThings.bind(this));
}
}
doThings() {
// do things
}
}
(() => {
for (const of document.querySelectorAll(".class-holder")) {
new MyClass(container);
}
}
that I import in my main.js file with import "./path-to-file/my-class". But I want to export it instead of create a new instance, and then import it in my main.js file.
But if I export with export { MyClass } and then import with import { MyClass } from "./path-to-file/my-class.js", I get MyClass is declared but it's value is never read. And if I try to run it in my main.js file with new MyClass(); I get Cannot read property querySelectorAll of undefined. How can I properly do the import in my main file so that the code in my-class.js runs correctly?

Import all files in a directory at once [duplicate]

With ES6, I can import several exports from a file like this:
import {ThingA, ThingB, ThingC} from 'lib/things';
However, I like the organization of having one module per file. I end up with imports like this:
import ThingA from 'lib/things/ThingA';
import ThingB from 'lib/things/ThingB';
import ThingC from 'lib/things/ThingC';
I would love to be able to do this:
import {ThingA, ThingB, ThingC} from 'lib/things/*';
or something similar, with the understood convention that each file contains one default export, and each module is named the same as its file.
Is this possible?

I don't think this is possible, but afaik the resolution of module names is up to module loaders so there might a loader implementation that does support this.
Until then, you could use an intermediate "module file" at lib/things/index.js that just contains
export * from 'ThingA';
export * from 'ThingB';
export * from 'ThingC';
and it would allow you to do
import {ThingA, ThingB, ThingC} from 'lib/things';

Just a variation on the theme already provided in the answer, but how about this:
In a Thing,
export default function ThingA () {}
In things/index.js,
export {default as ThingA} from './ThingA'
export {default as ThingB} from './ThingB'
export {default as ThingC} from './ThingC'
Then to consume all the things elsewhere,
import * as things from './things'
things.ThingA()
Or to consume just some of things,
import {ThingA,ThingB} from './things'

The current answers suggest a workaround but it's bugged me why this doesn't exist, so I've created a babel plugin which does this.
Install it using:
npm i --save-dev babel-plugin-wildcard
then add it to your .babelrc with:
{
"plugins": ["wildcard"]
}
see the repo for detailed install info
This allows you to do this:
import * as Things from './lib/things';
// Do whatever you want with these :D
Things.ThingA;
Things.ThingB;
Things.ThingC;
again, the repo contains further information on what exactly it does, but doing it this way avoids creating index.js files and also happens at compile-time to avoid doing readdirs at runtime.
Also with a newer version you can do exactly like your example:
import { ThingsA, ThingsB, ThingsC } from './lib/things/*';
works the same as the above.

You now can use async import():
import fs = require('fs');
and then:
fs.readdir('./someDir', (err, files) => {
files.forEach(file => {
const module = import('./' + file).then(m =>
m.callSomeMethod();
);
// or const module = await import('file')
});
});

Great gugly muglys! This was harder than it needed to be.
Export one flat default
This is a great opportunity to use spread (... in { ...Matters, ...Contacts } below:
// imports/collections/Matters.js
export default { // default export
hello: 'World',
something: 'important',
};
// imports/collections/Contacts.js
export default { // default export
hello: 'Moon',
email: 'hello#example.com',
};
// imports/collections/index.js
import Matters from './Matters'; // import default export as var 'Matters'
import Contacts from './Contacts';
export default { // default export
...Matters, // spread Matters, overwriting previous properties
...Contacts, // spread Contacts, overwriting previosu properties
};
// imports/test.js
import collections from './collections'; // import default export as 'collections'
console.log(collections);
Then, to run babel compiled code from the command line (from project root /):
$ npm install --save-dev #babel/core #babel/cli #babel/preset-env #babel/node
(trimmed)
$ npx babel-node --presets #babel/preset-env imports/test.js
{ hello: 'Moon',
something: 'important',
email: 'hello#example.com' }
Export one tree-like default
If you'd prefer to not overwrite properties, change:
// imports/collections/index.js
import Matters from './Matters'; // import default as 'Matters'
import Contacts from './Contacts';
export default { // export default
Matters,
Contacts,
};
And the output will be:
$ npx babel-node --presets #babel/preset-env imports/test.js
{ Matters: { hello: 'World', something: 'important' },
Contacts: { hello: 'Moon', email: 'hello#example.com' } }
Export multiple named exports w/ no default
If you're dedicated to DRY, the syntax on the imports changes as well:
// imports/collections/index.js
// export default as named export 'Matters'
export { default as Matters } from './Matters';
export { default as Contacts } from './Contacts';
This creates 2 named exports w/ no default export. Then change:
// imports/test.js
import { Matters, Contacts } from './collections';
console.log(Matters, Contacts);
And the output:
$ npx babel-node --presets #babel/preset-env imports/test.js
{ hello: 'World', something: 'important' } { hello: 'Moon', email: 'hello#example.com' }
Import all named exports
// imports/collections/index.js
// export default as named export 'Matters'
export { default as Matters } from './Matters';
export { default as Contacts } from './Contacts';
// imports/test.js
// Import all named exports as 'collections'
import * as collections from './collections';
console.log(collections); // interesting output
console.log(collections.Matters, collections.Contacts);
Notice the destructuring import { Matters, Contacts } from './collections'; in the previous example.
$ npx babel-node --presets #babel/preset-env imports/test.js
{ Matters: [Getter], Contacts: [Getter] }
{ hello: 'World', something: 'important' } { hello: 'Moon', email: 'hello#example.com' }
In practice
Given these source files:
/myLib/thingA.js
/myLib/thingB.js
/myLib/thingC.js
Creating a /myLib/index.js to bundle up all the files defeats the purpose of import/export. It would be easier to make everything global in the first place, than to make everything global via import/export via index.js "wrapper files".
If you want a particular file, import thingA from './myLib/thingA'; in your own projects.
Creating a "wrapper file" with exports for the module only makes sense if you're packaging for npm or on a multi-year multi-team project.
Made it this far? See the docs for more details.
Also, yay for Stackoverflow finally supporting three `s as code fence markup.

Similar to the accepted answer but it allows you to scale without the need of adding a new module to the index file each time you create one:
./modules/moduleA.js
export const example = 'example';
export const anotherExample = 'anotherExample';
./modules/index.js
// require all modules on the path and with the pattern defined
const req = require.context('./', true, /.js$/);
const modules = req.keys().map(req);
// export all modules
module.exports = modules;
./example.js
import { example, anotherExample } from './modules'

If you are using webpack. This imports files automatically and exports as api namespace.
So no need to update on every file addition.
import camelCase from "lodash-es";
const requireModule = require.context("./", false, /\.js$/); //
const api = {};
requireModule.keys().forEach(fileName => {
if (fileName === "./index.js") return;
const moduleName = camelCase(fileName.replace(/(\.\/|\.js)/g, ""));
api[moduleName] = {
...requireModule(fileName).default
};
});
export default api;
For Typescript users;
import { camelCase } from "lodash-es"
const requireModule = require.context("./folderName", false, /\.ts$/)
interface LooseObject {
[key: string]: any
}
const api: LooseObject = {}
requireModule.keys().forEach(fileName => {
if (fileName === "./index.ts") return
const moduleName = camelCase(fileName.replace(/(\.\/|\.ts)/g, ""))
api[moduleName] = {
...requireModule(fileName).default,
}
})
export default api

I've used them a few times (in particular for building massive objects splitting the data over many files (e.g. AST nodes)), in order to build them I made a tiny script (which I've just added to npm so everyone else can use it).
Usage (currently you'll need to use babel to use the export file):
$ npm install -g folder-module
$ folder-module my-cool-module/
Generates a file containing:
export {default as foo} from "./module/foo.js"
export {default as default} from "./module/default.js"
export {default as bar} from "./module/bar.js"
...etc
Then you can just consume the file:
import * as myCoolModule from "my-cool-module.js"
myCoolModule.foo()

Just an other approach to #Bergi's answer
// lib/things/index.js
import ThingA from './ThingA';
import ThingB from './ThingB';
import ThingC from './ThingC';
export default {
ThingA,
ThingB,
ThingC
}
Uses
import {ThingA, ThingB, ThingC} from './lib/things';

Nodejs ? Do like this:
Create a folder with index.js, in index file, add this:
var GET = require('./GET');
var IS = require('./IS');
var PARSE = require('./PARSE');
module.exports = { ...GET, ...IS, ...PARSE};
And, in file GET.js, or IS.js export as normal:
module.exports = { /* something as you like */}
ANd now, you need only including index.js like:
const Helper = require('./YourFolder');
Helper will include all of function in YourFolder.
Good day!

This is not exactly what you asked for but, with this method I can Iterate throught componentsList in my other files and use function such as componentsList.map(...) which I find pretty usefull !
import StepOne from './StepOne';
import StepTwo from './StepTwo';
import StepThree from './StepThree';
import StepFour from './StepFour';
import StepFive from './StepFive';
import StepSix from './StepSix';
import StepSeven from './StepSeven';
import StepEight from './StepEight';
const componentsList= () => [
{ component: StepOne(), key: 'step1' },
{ component: StepTwo(), key: 'step2' },
{ component: StepThree(), key: 'step3' },
{ component: StepFour(), key: 'step4' },
{ component: StepFive(), key: 'step5' },
{ component: StepSix(), key: 'step6' },
{ component: StepSeven(), key: 'step7' },
{ component: StepEight(), key: 'step8' }
];
export default componentsList;

You can use require as well:
const moduleHolder = []
function loadModules(path) {
let stat = fs.lstatSync(path)
if (stat.isDirectory()) {
// we have a directory: do a tree walk
const files = fs.readdirSync(path)
let f,
l = files.length
for (var i = 0; i < l; i++) {
f = pathModule.join(path, files[i])
loadModules(f)
}
} else {
// we have a file: load it
var controller = require(path)
moduleHolder.push(controller)
}
}
Then use your moduleHolder with dynamically loaded controllers:
loadModules(DIR)
for (const controller of moduleHolder) {
controller(app, db)
}

I was able to take from user atilkan's approach and modify it a bit:
For Typescript users;
require.context('#/folder/with/modules', false, /\.ts$/).keys().forEach((fileName => {
import('#/folder/with/modules' + fileName).then((mod) => {
(window as any)[fileName] = mod[fileName];
const module = new (window as any)[fileName]();
// use module
});
}));

if you don't export default in A, B, C but just export {} then it's possible to do so
// things/A.js
export function A() {}
// things/B.js
export function B() {}
// things/C.js
export function C() {}
// foo.js
import * as Foo from ./thing
Foo.A()
Foo.B()
Foo.C()

Is it possible to import all classes from a directory and initialise them?

Say this is how my directory tree looks like:
/
Children/
ChildrenIndex.js
Base.js
ChildA.js
ChildB.js
ChildC.js
...
ChildN.js
Main.js
Where any given ChildX.js looks like this,
import Base from './Base.js';
class ChildX extends Base {
constructor(params) {
this.params = params
}
}
export default ChildX
And ChildrenIndex.js looks like this,
export {default as ChildA} from './ChildA.js';
export {default as ChildB} from './ChildB.js';
export {default as ChildC} from './ChildC.js';
...
export {default as ChildN} from './ChildN.js';
Is it possible that I can import all children of Base.js in Main.js and get a list full of instances, each of a child's initialisation? Here is the pseudo code doing what I want:
import { * } from './Children/ChildrenIndex.js'
class Main {
constructor() {
let childConstructors = getAllConstructorsIn('./Children/ChildrenIndex.js');
let children = [];
for (let constrt of childConstructors) {
children.push(new constrt(params));
}
}
}
I can manually do this with import { ChildA, ChildB, ChildC, ... ,ChildN } from './Children/ChildrenIndex.js' and then fill the list like this: [new ChildA(params), new ChildB(params), new ChildC(params), ... , new ChildN(params)]. And, that works fine. However, I want someone to be able to just put an implementation of the Base.js in the children directory in order to add new functionality and not have to worry about then going and writing import statements and initialisation in other parts of the code. I am doing this in the model of a React app if that is relevant.

This should work in Main.js:
import * as Children from "./Children/ChildrenIndex";
Children.ChildA // ChildA component
Children.ChildB // ChildB component

ES6 export default function

can I export more than one function per file ?
it seems like when I do that , the second function ovverides the first one ,
example :
in my index.js file :
export default function aFnt(){
console.log("function a");
}
export default function bFnt(){
console.log("function b");
}
then when I import it in my file :
import aFnt from "./index";
console.log("aFnt : ",aFnt);
the result of the console.log is bFnt
what exactly is the case here ? do I have to create a new file per function ? that is not very practical , any solution or workaround ?

madox2's answer totally works if you want to import named functions.
If you still want to import the default, there's another technique:
function a() {}
function b() {}
export default { a, b }
and when you import:
import myObject from './index.js';
myObject.a(); // function a
myObject.b(); // function b
I hope this helps!

You can use named export instead of default:
export function aFnt(){
console.log("function a");
}
export function bFnt(){
console.log("function b");
}
and import it like:
import {aFnt, bFnt} from "./index";

there are couple of ways to export and import objects/functions
export function first() {}
export function second() {}
in other file
import { first, second} from './somepath/somefile/';
if you want to use default, in general if there is only one export in a file it should be a default export. but if you for some reasons want two functions as default then you have to club them as a object and export that object as default
function first() {}
function second() {}
const funcs= {"first":first,"second":second}
export default funcs;
in other file
import funcs from './somepath/somefile/';
funcs.first();funs.second();
this should be it.

import class and call static method with es6 modules with babel transpiler

I have the following class definition:
class EmberReflux{
static createActions(actions) {
console.log(actions);
}
}
export { EmberReflux };
When I import it from a different file:
import EmberReflux from '../utils/ember-reflux';
let TodoActions = EmberReflux.createActions(
[
"addItem",
"undo",
"redo"
]);
export { TodoActions };
The transpiled looks like this
define('ember-reflux/utils/todo-actions', ['exports', 'ember-reflux/utils/ember-reflux'], function (exports, EmberReflux) {
'use strict';
var TodoActions = EmberReflux['default'].createActions(["addItem", "undo", "redo"]);
exports.TodoActions = TodoActions;
});
I'm not sure what the default is in EmberReflux['default']
I want to call the static class method like this:
EmberReflux.createActions
But instead I have to call it like this:
EmberReflux.EmberReflux.createActions

You have two options:
Export EmberReflux like you are doing:
export { EmberReflux };
and then import it like:
import { EmberReflux } from '../utils/ember-reflux';
Use default when exporting:
export default EmberReflux;
and import it (like you are doing):
import EmberReflux from '../utils/ember-reflux';
In both cases you can then use your EmberReflux like:
EmberReflux.createActions();

I don't have enough reputation to comment, the alexpods's answer is perfect, but for matters of understanding our friend Ced asked:
Why do we need the default in the 2nd example ? In other words why can't we have export EmberReflux directly ?
When you wrote like this:
export { EmberReflux };
It's the same writing like this:
export { EmberReflux: EmberReflux };
That's why you need to run EmberReflux.EmberReflux, the solution is very simple:
export default EmberReflux;

class EmberReflux {
//...
}
module.exports = EmberReflux