ES6 Bare Import: How to use, and when?

Question

ES6 allows us to use a new import syntax. Using it, we can import modules into our code, or parts of those modules. Examples of usage include:

// Import the default export from a module.
import React from 'react'; 

// Import named exports from a module.
import { Component, PropTypes } from 'react'; 

// Named import - grab everything from the module and assign it to "redux".
import * as Redux from 'react-redux'; 

But then, we also have this mystery:

import 'react';

It looks as though ES6 supports a bare import, as this is a valid import statement. However, if this is done, it seems as though there's no way to actually reference the module.

How would we use this, and why?

Levasseur

Answer 1

For side-effects. For example (untested, concept-only):

// debug-keypresses.js

document.addEventListener('keypress', evt => {
  console.log("KEYPRESS:", evt.which);
});

// Another file, the below line is called bare import
import 'debug-keypress' 

You don't care about any exports here; the mere importing of this file should set up logging of keypresses, so bare import is all you need.

Doralia

You may want to clarify that the example is import 'debug-keypress', not import $ from 'jquery';. – Isidraisidro