Ich habe diese Syntax noch nie gesehen und frage mich, worum es geht.

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

Die Klammern links geben einen Syntaxfehler aus:

unerwartetes Token {

Ich bin nicht sicher, welcher Teil der Webpack-Konfiguration transformiert wird oder welchen Zweck die Syntax hat. Ist es eine Harmonie-Sache? Kann mich jemand aufklären?

Es heißt Destructuring Assignment und ist Teil des ES2015-Standards .

Die Destrukturierungszuweisungssyntax ist ein JavaScript-Ausdruck, mit dem Daten aus Arrays oder Objekten mithilfe einer Syntax extrahiert werden können, die die Konstruktion von Array- und Objektliteralen widerspiegelt.

Quelle: Destruktionszuweisungsreferenz auf MDN

Objektzerstörung

 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-Destrukturierung

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;

Dies ist eine Destrukturierungsaufgabe . Es ist eine neue Funktion von ECMAScript 2015.

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

Entspricht:

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

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

... nutzt Destrukturierung, um das Gleiche zu erreichen wie ...

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

... ist aber weitaus lesbarer.

Es ist eine neue Funktion in ES6, um Objekte zu zerstören.

Wie wir alle wissen, findet hier eine Zuweisungsoperation statt, was bedeutet, dass der Wert auf der rechten Seite der Variablen auf der linken Seite zugewiesen wird.

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

In diesem Fall gibt die require('react-router')Methode ein Objekt mit einem Schlüsselwertpaar zurück

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

Und wenn wir möchten , einen Schlüssel in diesem zurückgegebene Objekt sagen nehmen , Navigationum eine Variable , die wir verwenden können , Object destructing dafür.

Dies ist nur möglich, wenn wir den Schlüssel in der Hand haben.

Nach der Zuweisungsanweisung Navigationenthält die lokale Variablefunction a(){}

Ein anderes Beispiel sieht so aus.

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