2016-03-26 9 views
5

Używam webpack z babel-loader do transpile mój ES6/JSX, który zostanie podzielony na serwerowych i klienckich wiązek:ES6 eksport moduł import z WebPack i babel-ładowarki

//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'] 
     } 
     } 

Powyższe prace, ale w oparciu o przykład w sekcji Syntaxhere, w którym mowa babel ją obsługuje, więc założyć, że mógł napisać coś jak poniżej, ale nie robi praca:

export CustomerView from './CustomerView.jsx' 

również robi działać, jeśli klasa isnt domyślny Expo rt klasa:

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

ja nie otrzymuję żadnych błędów z WebPack, tworzy wiązki, ale kiedy go uruchomić i uzyskać Could not find a component named 'Components.CustomerView', więc z jakiegoś powodu, chyba że jest to domyślne eksportować seeem expose-loader robi się tworzenia Components globalny, czy nie dołączając do niego CustomerView żadnych pomysłów?

+0

winię babel's [tutorial] (https://babeljs.io/docs/learn-es2015/) lol –

+2

@AmanuelBogale To jest oficjalna nazwa specyfikacji, podoba Ci się to lub nie. http://www.ecma-international.org/ecma-262/6.0/ "Specyfikacja językowa ECMAScript® 2015" Obydwie nazwy są poprawne, a posuwanie się do przodu w roku będzie bardziej powszechne. – loganfsmyth

+1

Dosent matter @loganfsmyth Nie podoba mi się to imię. Po prostu powiedz ES6 lub ES7 ... Jestem zmęczony tym – amanuel2

Odpowiedz

4

Co powinienem zrobić:

Wrap wartości eksporcie w {}:

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

Powodem dostałem mylić:

Zadziała tylko wtedy, gdy klasa CustomerView jest domyślny eksport:

import CustomerView from './CustomerView.jsx' 

Gdy nie ma eksport domyślna klasa, musi zostać owinięte w nawiasach traktowany lub nie działa:

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

ale z jakiegoś powodu, babel-loader byłby skompilować to kiedy nastąpił eksport domyślna klasa:

export CustomerView from './CustomerView.jsx' 

lub tym

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

kombinacja 2 COM ułożone, ale dał mi błąd could not find a component (to react.net pre-rendering) chyba ustawić domyślny eksport klasy w CustomerView.jsx, co chyba oznaczało, że był do tego łączenia poprzez import/eksport:

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