Pass options to ES6 module imports

442
May 18, 2017, at 2:06 PM

Is it possible to pass options to ES6 imports?

How do you translate this:

var x = require('module')(someoptions);

to ES6?

Answer 1

There is no way to do this with a single import statement, it does not allow for invocations.

So you wouldn't call it directly, but you can basically do just the same what commonjs does with default exports:

// module.js
export default function(options) {
    return {
        // actual module
    }
}
// main.js
import m from 'module';
var x = m(someoptions);

Alternatively, if you use a module loader that supports monadic promises, you might be able to do something like

System.import('module').ap(someoptions).then(function(x) {
    …
});
Answer 2
Concept

Here's my solution using ES6

Very much inline with @Bergi's response, this is the "template" I use when creating imports that need parameters passed for class declarations. This is used on an isomorphic framework I'm writing, so will work with a transpiler in the browser and in node.js (I use Babel with Webpack):

./MyClass.js

export default (Param1, Param2) => class MyClass {
    constructor(){
        console.log( Param1 );
    }
}

./main.js

import MyClassFactory from './MyClass.js';
let MyClass = MyClassFactory('foo', 'bar');
let myInstance = new MyClass();

The above will output foo in a console

EDIT

Real World Example

For a real world example, I'm using this to pass in a namespace for accessing other classes and instances within a framework. Because we're simply creating a function and passing the object in as an argument, we can use it with our class declaration likeso:

export default (UIFramework) => class MyView extends UIFramework.Type.View {
    getModels() {
        // ...
        UIFramework.Models.getModelsForView( this._models );
        // ...
    }
}

The importation is a bit more complicated and automagical in my case given that it's an entire framework, but essentially this is what is happening:

// ...
getView( viewName ){
    //...
    const ViewFactory = require(viewFileLoc);
    const View = ViewFactory(this);
    return new View();
}
// ...

I hope this helps!

Answer 3

I believe you can use es6 module loaders. http://babeljs.io/docs/learn-es6/

System.import("lib/math").then(function(m) {
  m(youroptionshere);
});
Answer 4

Building on @Bergi's answer to use the debug module using es6 would be the following

// original
var debug = require('debug')('http');
// ES6
import * as Debug from 'debug';
const debug = Debug('http');
// Use in your code as normal
debug('Hello World!');
Rent Charter Buses Company
READ ALSO
How to make a middle element float in CSS?

How to make a middle element float in CSS?

There are 3 elements in My HTML, like

387
How to design a page in visual studio for each row from a datatable

How to design a page in visual studio for each row from a datatable

Currently i am working on designing my website, the data are from my database

314
How to set 'ExpandebleRow' property to ui-grid?

How to set 'ExpandebleRow' property to ui-grid?

I using ui-grid to show grid and subgrid for each rowWhen parent grid is loaded, it shows '+' symbol but does not expand when clicking on '+'

237
Angular2 : How to temporarily highlight dom elements that have just changed?

Angular2 : How to temporarily highlight dom elements that have just changed?

Before implementing a solution on my own I would like to know if there is a simple manner to change the style of an element (a brief highlight) when the data bound property value has just change

314