2016-03-26 15 views
5

I webpack mit babel-loader bin mit meinen ES6/JSX transpile, die in Server- und Client-Bündel aufgeteilt werden:ES6 Modul Import-Export mit webpack und babel-loader

//components/CustomerView.jsx 
export default class CustomerView extends React.Component { 
    render() { 
     ... 
    } 
} 

//components/index.js 
import CustomerView from './CustomerView.jsx' 
export {CustomerView} 

//client.js 
var Components = require('expose?Components!./components'); 

//webpack.config.js (loader section) 
     { 
     test: /.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     } 

Die oben genannten Werke, sondern auf der Grundlage des Beispiel im Syntax Abschnitt here, die babel es erwähnt unterstützt, so angenommen i i so etwas wie die folgenden schreiben könnte, aber es funktioniert nicht:

export CustomerView from './CustomerView.jsx' 

auch tut, es funktioniert, wenn die Klasse ist nicht die Standard-expo rt Klasse:

export class CustomerView extends React.Component { 
    render() { 
     ... 
    } 
} 

Ich erhalte keine Fehler aus webpack, erstellt er die Bündel, aber wenn ich es laufen i Could not find a component named 'Components.CustomerView' bekommen, also aus irgendeinem Grund, wenn es die Standard-Export die expose-loader doesnt seeem ist die Schaffung werden Components global, oder nicht anfügen CustomerView dazu .. irgendwelche Ideen?

+0

ich schuld babels [tutorial] (https://babeljs.io/docs/learn-es2015/) lol –

+2

@AmanuelBogale Das ist die offizielle Spezifikation Name, ob es oder nicht. http://www.ecma-international.org/ecma-262/6.0/ "ECMAScript® 2015 Language Specification" Beide Namen sind gültig und in Zukunft werden die Jahresversionen häufiger verwendet. – loganfsmyth

+1

Dosent Angelegenheit @loganfsmyth Ich mag diesen Namen nicht. Sagen Sie einfach ES6 oder ES7 ... Ich habe es satt – amanuel2

Antwort

4

Was ich getan haben sollte:

Wickeln Sie die Exportwerte in {}:

export {CustomerView} from './CustomerView.jsx' 

Der Grund, warum ich verwirrt habe:

Dies funktioniert nur, wenn die CustomerView Klasse der Standard-Export:

import CustomerView from './CustomerView.jsx' 

Wenn es keine Standardklasse Export ist, muss es in curlies gewickelt werden oder es funktioniert nicht:

import {CustomerView} from './CustomerView.jsx' 

aber aus irgendeinem Grund, babel-loader würde nicht diese kompilieren, wenn es eine Standardklasse Export war:

export CustomerView from './CustomerView.jsx' 

oder diese

import CustomerView from './CustomerView.jsx' 
export CustomerView 

eine Kombination aus 2 com angehäuft, aber gab mir die could not find a component Fehler (dies ist react.net Vorrendern), es sei denn ich die Standardklasse Export in CustomerView.jsx gesetzt, was ich, es war Chaining durch diesen Import/Export-guess gemeint:

import CustomerView from './CustomerView.jsx' 
export {CustomerView} 
Verwandte Themen