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?

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?

• javascript
• ecmascript-6
• es6-module-loader

1 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.