2016-03-26 38 views
5

Sto usando webpack con babel-loader al transpile mia ES6/JSX, che viene diviso in server e client bundle:ES6 modulo di import export con webpack e 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'] 
     } 
     } 

I lavori di cui sopra, ma sulla base del esempio nella sezione di Syntaxhere, che menziona babel lo supporta, così ho pensato che potrei scrivere qualcosa come il seguente, ma doesnt lavoro:

export CustomerView from './CustomerView.jsx' 

Inoltre, non lavorare se la classe è neanche l'expo di default classe RT:

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

non ottengo errori da webpack, crea i fasci, ma quando l'eseguo ottengo Could not find a component named 'Components.CustomerView', così per qualche motivo meno che non sia l'esportazione di default del seeem expose-loader pretende di essere la creazione del Components globale, o non allegare CustomerView ad esso .. qualche idea?

+0

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

+2

@AmanuelBogale Questo è il nome della specifica ufficiale, piaccia o no. http://www.ecma-international.org/ecma-262/6.0/ "Specifica lingua ECMAScript® 2015" Entrambi i nomi sono validi e le versioni dell'anno saranno più comuni. – loganfsmyth

+1

Dosaggio @loganfsmyth non mi piace quel nome. Dì solo ES6 o ES7 ... Sono stanco di farlo – amanuel2

risposta

4

Cosa avrei dovuto fare:

Wrap valori di esportazione in {}:

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

Il motivo che mi sono confuso:

Questo funziona solo quando la classe CustomerView è l'esportazione predefinita:

import CustomerView from './CustomerView.jsx' 

Quando non c'è esportazione classe predefinita, ha bisogno di essere avvolto in curlies o non funziona:

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

ma per qualche ragione, babel-loader wouldnt compilare questo quando ci fu un export classe predefinita:

export CustomerView from './CustomerView.jsx' 

o questo

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

una combinazione dei 2 com accatastato, ma mi ha dato l'errore could not find a component (questo è react.net il pre-rendering) a meno che ho impostato l'esportazione classe predefinita in CustomerView.jsx, che immagino significa che era concatenamento attraverso a questo import/export:

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