ES6 Bare Import: how to use and when?

Question

ES6 allows us to use the new import syntax. Using it, we can import modules into our code or parts of these modules. Examples of using:

import React from 'react'; // Import the default export from a module.
import { Component, PropTypes } from 'react'; // Import named exports from a module.
import * as Redux from 'react-redux'; // Named import - grab everything from the module and assign it to "redux".

But then we also have this secret:

import 'react';

ES6 seems to support bare-metal imports, as it is a valid import statement. However, if this is done, there seems to be no way to really refer to the module.

How will we use this and why?

Answer 1

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

// debug-keypresses.js

import $ from 'jquery';

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

; , .

EDIT: , loganfsmyth , import 'debug-keypresses', import $ from 'jquery'.