MENU


Export , Import

You can import variables exported from another file, and bring them into the current scope.

To do imports, coders used to resort to using transpilers like Babel, which allows you to use futuristic Javascript features. (Some of the other libraries include Webpack, Rollup, SystemJS, AMD, Browserify etc.) This feature has been widely implemented by browsers as of 25 July 2020.

There are two kinds of exports/imports:I. Named export/importI. Named export/import I. Named export/import As far as client-side (browser) JavaScript is concerned, you can add type="module" to both external as well as internal js scripts.It is worthwhile mentioning that for relative paths, you must not omit the "./" characters at the front.


RESETRUNFULL
<!DOCTYPE html><html><body><script>

// module.jsvar a = 10;var m = 20;export {a,a as aa};export var b = 30;export function f(){return m;};export class cl{}

</script></body><html>

<!DOCTYPE html><html><body><script>

<!DOCTYPE html><html><body><script type="module">    import {a,b,aa,aa as aaa, f, cl} from "./module.js";    import * as X from "./module.js";console.log(a,b,aa,aaa,X.aa,X.aaa,f(),cl);                         // 10 30 10 10 10 undefined 20 class cl{}export {a,b as z} from "./module.js";                        // re-exports a and bexport * from "./module.js";                            // re-exports everything except default</script></body></html>

</script></body><html>

A named import always requires the use of {} or *.


RESETRUNFULL
<!DOCTYPE html><html><body><script>

// Exporting destructured assignments with renamingexport const { name1, name2: bar } = o;

</script></body><html>

II. Default export/import II. Default export/import II. Default export/import

For a default export, an expression/function/class is used, and thus no name matching is involved. There can only be one default export in a file, and only one form of syntax exists for a default import.

export default a*10; import X from “./module.js”;
export default function (...) { ... }
// also class, function*
export default function f(...) { ... }
// also class, function*
export { a as default, b, c };

A default export always requires the keyword 'default'.To re-export a default:


RESETRUNFULL
<!DOCTYPE html><html><body><script>

export {default} from “module.js";

</script></body><html>

Special Notes about Imports Special Notes about Imports Special Notes about Imports A default export may be regarded as a named export with the name 'default'.

export default 100; import {default as X} from “./file”;

Named and default imports can be combined into one line.


RESETRUNFULL
<!DOCTYPE html><html><body><script>

import a, {b, c} from “modules.js";  // also * as X

</script></body><html>

is identical to:

import a from “modules.js”
import {b,c} from “modules.js”

If only the filename is present in an import statement, the file will be run, and no exports will be imported.


RESETRUNFULL
<!DOCTYPE html><html><body><script>

import “modules.js";

</script></body><html>

An imported variable cannot be reassigned directly. If somehow it is changed in the exporting file, its corresponding value in the importing file changes accordingly.


RESETRUNFULL
<!DOCTYPE html><html><body><script>

// lib.jsexport let counter = 3;export function incCounter() {
    counter++;}

</script></body><html>

<!DOCTYPE html><html><body><script>

import { counter, incCounter } from './lib.js';console.log(counter); // 3incCounter();console.log(counter); // 4counter++;   // TypeError: Assignment to constant variable

</script></body><html>

The imported file must be hard-coded (ie. exists in the form of a string literal) outside any statement block.


RESETRUNFULL
<!DOCTYPE html><html><body><script>

var a = “./file";import b from a+".js";  // SyntaxError

</script></body><html>

<!DOCTYPE html><html><body><script>

if (condition) {
    import something from 'something';  // SyntaxError}

</script></body><html>

To import a module dynamically or within a block, use 'import' as a function, which returns a promise (8.5).


RESETRUNFULL
<!DOCTYPE html><html><body><script>

// Dynamic Import(async () => {
  if (somethingIsTrue) {const { default: myDefault, foo, bar } =
                                           await import('./module.js');
  }})();

</script></body><html>

To provide a convenient way to import from multiple files simultaneously, consider using the following method:

// library.js
export * from 'm1.js';export * from 'm2.js';export * from 'm3.js ';		 import * as O from 'library.js';

The following two code segments are identical:

export * as utils from './utils.mjs'
import * as utils from './utils.mjs'export { utils }

The import.meta import.meta import.meta object provides information about the file.


RESETRUNFULL
<!DOCTYPE html><html><body><script>

<!DOCTYPE html><html><head></head><body><script type="module">
   console.log(import.meta);   // {url: "http://localhost:8080/js%20test.html"}</script></body></html>
    

</script></body><html>