JavaScript模块从一个文件导出模式

Question

文件夹结构：

├── app
├── index.js (start point in Webpack)
├── component
│   ├── Home──Home.js
|   ├──index.js
│

component / Home / Home.js的课程写得像 - export class Home extends React.Component {}

我已导出的

component / index.js - export {Home} from './Home/Home'

我正在index.js中导入（起点）import {Home} from './components'

它为我工作以及我想要的改变不起作用

1. 在component / Home / Home.js中想要导出像导出默认类Home extends React.Component {}

2. 在component / index.js中，我想从'./Home/Home'

导出像export一样的Home

3. 我想从'./components'

导入index.js起点import Home

Answer 1

in Home

export default class Home extends React.Component {}

in component / index.js

export * from './Home/Home'

索引中的

import Home from './components'

Answer 2

导入和导出与文件结构无关，但是，当然，由于导入路径，您需要知道文件结构。

  

在component/Home/Home.js中想要像导出默认类一样导出   Home扩展了React.Component {}

您可以使用关键字default：

导出默认类

export default class Home extends React.Component {
   // your code
}

如果出于任何原因这对你不起作用，你仍然可以这样做：

class Home extends React.Component {
   // your code
}

export default Home;

  

在component/index.js中，我想从导出Home导出   ./Home/Home

很难说我是否看不到代码。我希望还有一些Home类/函数你想默认导出，然后你可以这样做（或者再次上面的解决方案）：

export default const Home = () => {
   // your code
};

或者，再次：

const Home = () => {
   // your code
};

export default Home;

  

我想从index.js导入点导入Home   ./components。

由于现在有默认导出，您可以使用此功能（导入时始终可以从路径中省略index.js）：

import Home from './components';

Answer 3

在你的Home.js中：

export class Home extends Component{ /* your code */ }

index.js中的

：

export { * as default } from './Home/Home'

在主文件中：

import Home from './components'

注意：据我所知，你提出的所有三个条件都无法满足。此外，如果您从索引导出Home作为默认值，那么其他组件呢？

Answer 4

要导出所有组件，您可以在index.js

中使用以下模式

export Home from './Home'

为了使其工作，您需要使用babel-plugin-transform-export-extensions，因为这不是ES规范的当前部分。