How to use import in JS files?

Question

I got a js file from another developer in wich the developer uses import and not require. It looks like

import { Selector, Role, ClientFunction } from 'testcafe';
import inputStore from '../config/input-store';
import axios from "axios";
import fs from "fs";
import path from "path";

I want now add another module to this js file, but I have no idea how I can use the import The module I want to use is https://github.com/Olegas/dom-compare

Its docs said:

var compare = require('dom-compare').compare,

What is its import syntax?

Answer 1

require is part of the CommonJS module syntax.

import and export are part of the standard ES6 module format which is supported in recent versions of Node.js (but only if explicitly enabled) and in module web browsers when initialized from a <script type="module">

Note that your example also uses destructuring syntax to read the value of properties of the imported object without having the store the object itself in an intermediary variable.

The equivalent of

var compare = require('dom-compare').compare,

… in ES6 with ES6 modules and destructuring would be:

import { compare } from "dom-compare";

Answer 2

tldr:

import {compare} from 'dom-compare';

Explanation:

In these import statements, the word directly to the right of the import keyword is the variable name you can use to access the imported module. So for example, in this instance, the most direct translation from var compare = require('dom-compare').compare to an import statement would be:

import dom-compare from 'dom-compare';
var compare = dom-compare.compare;

Then you have access to an object named dom-compare in a variable of the same name and access to a property of the dom-compare object in a variable of its same name. You could call either of these variables something else if you'd like:

import myComparisonModule from 'dom-compare';
var theComparingProperty = myComparisonModule.compare;

But in order to grab a particular property off of an object, you can also use the shorthand from es6 that does the same thing, but sets the variable name to whatever the property name was:

import dom-compare from 'dom-compare';
var {compare} = dom-compare;

In this syntax, you still have access to two variables ( dom-compare and compare ). The only difference is that you could've still named the dom-compare variable anything you liked, but the name of the variable that you're setting to the property you got off the dom-compare object is set to whatever it was originally called when it was a property of the object (in this case compare ).

But you can also do this on just one line if you don't need anything else from the dom-compare module except for the compare property, and that's how we get:

import {compare} from 'dom-compare';

In this case we don't have a variable to access the dom-compare module, just a variable to access the compare property from the dom-compare module. And it's named after itself.

You can also grab multiple properties off of an object in one line. For example, in the statement import { Selector, Role, ClientFunction } from 'testcafe'; that you referenced, the other developer was pulling multiple properties out of the testcafe object to use as variables of the same names, a shorthand for:

import testcafeModule from 'testcafe';
var Selector = testcafeModule.Selector;
var Role = testcafeModule.Role;
var ClientFunction = testcafeModule.ClientFunction;