Close

JavaScript Modules - Combining Default import With Namespace Or Named Imports

[Updated: Nov 28, 2018, Created: Nov 28, 2018]

ES6 specification allows to combine default imports with namespace/named imports.

Exporting:

export default function doSomethingByDefault(){...} //default export
export function run1(){....}  //named export
export function run2(){....} //named export

Importing with combined default and namespace features:

import defaultFeature, * as runner from "<module-name>"
 ....

Importing with combined default and named features (local aliases can optionally be used) :

import defaultFeature, {run1 as exec, run2} from "<module-name>"
 ...

The default import must be declared first. Also the three; default, namespace and named imports cannot be mixed at a time.

Example

js/lib.js

export default function showFunctionNames(){
    console.log("use functions: showSquare, showSum and ShowSquareRoot");
}
export function showSquare(num) {
    show(num * num);
}

export function showSum(x, y) {
    show(x + y);
}

export function showSquareRoot(x){
   show(Math.sqrt(x));
}

function show(result) {
    console.log(result);
}

import help, {showSquare as sq, showSquareRoot}  from "./lib.js";

sq(2);
showSquareRoot(2);
help()

index.html

<html>
<script type="module" src="./js/app.js"></script>
<body>

</body>
</html>

Output

To try examples, run http-server from project root:

$ http-server

On loading index.html, we have following output:

4
1.4142135623730951
use functions: showSquare, showSum and ShowSquareRoot

Example Project

Dependencies and Technologies Used:

  • Node.js v8.11.3
  • Google Chrome Browser Version 70.0.3538.102 (Official Build) (64-bit)
Mixing default, namespace and named imports Select All Download
  • javascript-mixing-default-and-named-imports
    • js
      • app.js

    See Also