2015-11-07 18 views
10

Ich habe ReactJS.Net erfolgreich ausgeführt, einschließlich ES6-Syntax.ReactJS.net - Wie verwende ich ES6-Module

Ich verwende die Standard-Jsx-Transformationspipeline, die Babel verwendet. Mit Blick auf Quelle im Browser kann ich sehen, dass ES6-Code von ReactJS.Net in ES5 konvertiert wurde.

Ich konnte nicht Module funktionieren.

Der Browser gibt mir 2 Fehler:

Uncaught ReferenceError: exports is not defined 
Uncaught ReferenceError: require is not defined 

Wie verwende ich ES6 Module?

Einfachstes Beispiel:

Lib.js

export function square(x) { 
    return x * x; 
} 

UserOfLib.js

import { square } from 'Lib'; 
console.log(square(11)); 

Ruft dazu umgewandelt (bei Browser-Quelle suchen):

Lib:

// @hash v3-AD133907ABEC5D32B3768A3AF2301FC9 
// Automatically generated by ReactJS.NET. Do not edit, your changes will be overridden. 
// Version: 2.0.1 (build 5e9476a) 
// Generated at: 08-Nov-15 6:40:26 AM 
/////////////////////////////////////////////////////////////////////////////// 
Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 
exports.square = square; 

function square(x) { 
    return x * x; 
} 

UserOfLib:

// @hash v3-812C209AFED25C2B4507E5769B0D899B 
// Automatically generated by ReactJS.NET. Do not edit, your changes will be overridden. 
// Version: 2.0.1 (build 5e9476a) 
// Generated at: 08-Nov-15 6:40:26 AM 
/////////////////////////////////////////////////////////////////////////////// 
var _Lib = require('Lib'); 

console.log((0, _Lib.square)(11)); // 121 

Antwort

9

Derzeit ReactJS.Net behandelt keine Module. Wenn Sie Module verwenden möchten, müssen Sie einen Modul-Bundler wie Webpack oder Browserify verwenden, um die Module auf Vanilla-JavaScript zu kompilieren. Die Implementierung der Unterstützung für Module in ReactJS.NET selbst ist ein nicht unerheblicher Arbeitsaufwand, da Abhängigkeiten und Lademodule in der richtigen Reihenfolge geladen werden müssen und es bereits gute getestete Lösungen wie Webpack gibt.

+1

Könnten diese beiden in Kombination mit der JSX-Verarbeitung verwendet werden? –