基于ES6的多个（React）Node.JS模块导入存在问题

Question

我一直在研究React项目，我在尝试使用ES6导入多个导出的React节点模块时遇到了问题。

这是我的代码：

我应该可以在 hello 文件夹中包含 AddFriendInput 和 FriendList ，而不会出现任何问题。但是当webpack / babel编译时我得到这个错误：

ERROR in ./src/common/containers/Menu/indexRender.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../../hello in /Users/markpaul/Documents/projects/patient-portal-app/src/common/containers/Menu
 @ ./src/common/containers/Menu/indexRender.js 122:13-35

我的 AddFriendInput.js 文件的内容如下：

import React, { Component, PropTypes } from 'react';

export default class AddFriendInput extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      name: this.props.name || ''
    };

  }
  render() {
    return (
      <div>

      </div>
    );
  }
}

我使用带有babel的webpack来转换我的文件。我的Babel配置是：

{
  "presets": ["react", "es2015", "stage-1"]
}

我能让它发挥作用的唯一方法就是：

import AddFriendInput from '../../hello/AddFriendInput/AddFriendInput';
import FriendList from '../../hello/FriendList/FriendList';

但是你可以看到，这看起来很可怕。

有人可以帮忙。

提前致谢。

Answer 1

创建 home / index.js

import AddFriendInput from './AddFriendInput'
import FriendList from './FriedList'

export { AddFriendInput, FriendList }

OLD ANSWER：

将AddFriendInput.js重命名为index.js，之后您可以像这样导入：

import AddFriendInput from '../../hello/AddFriendInput'

Answer 2

ES6模块不会自动加载嵌套目录/文件

按目录名称导出（../../hello）表示您拥有hello/index.js

更新

你可以像@Sergey一样创建home / index.js，或者有一个名为auto-import的模块可以监视你的目录并为你更新index.js。

Answer 3

我认为你不了解commonJS。

如果import AddFriendInput from '../../hello/AddFriendInput/AddFriendInput'; import FriendList from '../../hello/FriendList/FriendList'; module.exports = { AddFriendInput, FriendList }; 是文件夹，则nodejs将找到AVSpeechUtterance *utterance = [AVSpeechUtterance speechUtteranceWithString:_strTextCheck]; AVSpeechSynthesizer *syn = [[AVSpeechSynthesizer alloc] init]; [syn speakUtterance:utterance]; 文件。所以你必须有一个文件[AVAudioSession overrideOutputAudioPort:AVAudioSessionPortOverrideSpeaker error:&error]; 。

{{1}}