反应出口意外的令牌答案

【问题标题】：react export Unexpected token反应出口意外的令牌
【发布时间】：2017-12-20 23:52:24
【问题描述】：

所以我有这些文件和文件夹。

App.js
modules/
  user/
    index.js
    list.js

在 list.js 我有export default (props) => (...)

在 index.js 我有export UserList from './list';

在 App.js 中我有 import { UserList } from './modules/user';

那里有什么问题吗？因为我得到了

./src/modules/user/index.js
Syntax error: Unexpected token, expected { (1:7)
> 1 | export UserList from './list';

但我看不出这里有什么问题？救命！

编辑：这是我的 list.js 文件的更多详细信息，但我认为这没有什么不同，因为错误在 index.js 中

import React from 'react';
// more import
export default (props) => (
  <List {...props}>
    ...
  </List>
);

【问题讨论】：

【解决方案1】：

我看到您正在直接导出属于另一个文件的组件而不导入它。

你的做法是ES8 Proposal

在 ES6 中，您可以将组件导出为

 export {default as UserList} from './list'

然后导入为

import { UserList } from './modules/user';

【讨论】：

本地验证，不错。
行得通！有趣的。我从这里得到了我上面代码的想法：github.com/marmelab/admin-on-rest/blob/master/src/rest/index.js 它在那里工作，但不适合我。
不确定它是否适用于 Github 存储库中的 OP。显然这是一种 ES8 语法，我不确定它是否可用
他们正在使用 babel 和 stage-0，也许就是这样。
如果您在文件中有多个导入，并且您想在一个对象中导出所有内容，请使用 export {UserList, otherComponent}？有了这个，您不必使用默认值。

【解决方案2】：

对于 Babel 6 用户

像这样将 babel-plugin-transform-export-extensions 插件添加到您的 .babelrc 中：

  "plugins": [
    "babel-plugin-transform-export-extensions",
    "transform-es2015-modules-commonjs"
  ]

然后运行到下面安装插件

npm install --save-dev babel-plugin-transform-export-extensions
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

在此之后，模块的导出将通过 index.js 以下列方式进行：

export simpleRestClient from './simple';
export jsonServerRestClient from './jsonServer';
export * from './types';

对于使用早期 babel 版本的用户，只需使用 commonjs 模块即可。

【讨论】：