Non ho visto questa sintassi prima e mi chiedo di cosa si tratti.

var { Navigation } = require('react-router');

Le parentesi a sinistra generano un errore di sintassi:

gettone inaspettato {

Non sono sicuro di quale parte della configurazione del webpack si stia trasformando o quale sia lo scopo della sintassi. È una cosa di armonia? Qualcuno può illuminarmi?

Si chiama assegnazione destrutturante e fa parte dello standard ES2015 .

La sintassi di assegnazione destrutturante è un'espressione JavaScript che rende possibile estrarre dati da array o oggetti utilizzando una sintassi che rispecchia la costruzione di array e letterali oggetto.

Fonte: riferimento dell'assegnazione di destrutturazione su MDN

Destrutturazione di oggetti

 var o = {p: 42, q: true};
 var {p, q} = o;

 console.log(p); // 42
 console.log(q); // true 

 // Assign new variable names
 var {p: foo, q: bar} = o;

 console.log(foo); // 42
 console.log(bar); // true

Array destrutturazione

var foo = ["one", "two", "three"];

// without destructuring
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// with destructuring
var [one, two, three] = foo;

Questo è un incarico destrutturante . È una nuova funzionalità di ECMAScript 2015.

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

È equivalente a:

var AppRegistry = React.AppRegistry;
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View;

var { Navigation } = require('react-router');

... usa la destrutturazione per ottenere la stessa cosa di ...

var Navigation = require('react-router').Navigation;

... ma è molto più leggibile.

È una nuova funzionalità di ES6 per destrutturare gli oggetti.

Come tutti sappiamo, qui è in corso un'operazione di assegnazione, il che significa che il valore del lato destro viene assegnato alla variabile del lato sinistro.

var { Navigation } = require('react-router');

In questo caso, il require('react-router')metodo restituisce un oggetto con una coppia chiave-valore simile

{ Navigation: function a(){}, Example1: function b(){}, Example2: function c(){} }.

E se volessimo prendere una chiave in quell'oggetto restituito diciamo Navigationa una variabile che possiamo usare la distruzione di oggetti per quello.

Questo sarà possibile solo se avremo la chiave in mano.

Quindi, dopo l'istruzione di assegnazione, la variabile locale Navigationconterràfunction a(){}

Un altro esempio è questo.

var { p, q } = { p: 1, q:2, r:3, s:4 };
console.log(p) //1;
console.log(q) //2;