ES6語法在一個文件輸出模塊

我想有一個定義index.js我所有的反應成分是這樣的：ES6語法在一個文件輸出模塊

import App from './app'; 
import Home from './home'; 

export App; 
export Home;

我再引用它們在另一個文件：

import { App, Home } from './components/index'; 

ReactDOM.render(
    <Provider store={store}> 
    <Router history={history}> 
     <Route path="/" component={App}> 
     <IndexRoute component={Home}/> 
     </Route> 
    </Router> 
    </Provider>, 
    document.getElementById('theContent') 
);

但我得到這個錯誤：

Module build failed: SyntaxError: /Users/paulcowan/projects/liverpool-managers/client/app/components/index.js: Unexpected token (4:10) 
    2 | import Home from './home'; 
    3 | 
> 4 | export App; 
    |   ^

來源

2016-07-21 dagda1

export如下所示。

import App from './app'; 
import Home from './home'; 

export {App, Home};

希望這一個適合你。

或者，你可以寫你導入如下（命名對象的引用）

import * as Components from './components/index'; 

ReactDOM.render(
    <Provider store={store}> 
    <Router history={history}> 
     <Route path="/" component={Components.App}> 
     <IndexRoute component={Components.Home}/> 
     </Route> 
    </Router> 
    </Provider>, 
    document.getElementById('theContent') 
);

來源

2016-07-21 19:41:04

這並不是正確的使用方法export

這

export App; 
export Home;

應該

export {App, Home}

或

export App from './app'; 
export Home from './home';

來源

2016-07-21 19:41:05 QoP

注意''.app'的應用程序導出;'是語法提議，但不是官方的。你可以從'./app';'export {default {App}作爲默認值。 – loganfsmyth

我遇到了同樣的問題最近，而且基本上export沒有設計使用這種方式 - 它「是用來導出功能，對象或原語」 docs，而不是「導入模塊」，但您可以通過將import ed模塊分配給一個普通對象，然後將該對象分配給它進行模擬。

import App from './app'; 
import Home from './home'; 

const exports = { 
    App, 
    Home, 
}; 

export default exports;

你就必須import整個對象，很遺憾，但如果主要目的只是爲了有一個單一的模塊導入點，這可能不是太糟糕。

如果這種行爲在我們獲得本地實現時發生變化，而不是被轉譯者限制，我不會感到驚訝，但這種解決方案不是太冗長或難以理解。

來源

2016-07-21 19:51:08

ES6語法在一個文件輸出模塊

回答

相關問題