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

Posted 2023-02-23

【中文标题】JavaScript 模块从一个文件中导出模式

【英文标题】：JavaScript Module Exports Pattern From One File

【发布时间】：2018-02-14 11:44:18

【问题描述】：

文件夹结构：

├── 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'

它对我有用，而我想要的更改不起作用

在 component/Home/Home.js 中想导出类似 export default class Home extends React.Component

在 component/index.js 中，我想像 export Home from './Home/Home' 一样导出

我想在 index.js 中导入 import Home from './components'

【问题讨论】：

从 index.js 中的 './components' 导入主页 - 应该不起作用。应该是import Home from './components

请确认:)

它不工作，但另一个问题是当我在课堂上写导出默认值时它给出了错误

这个模式有名字吗？

【参考方案1】：

在首页

export default class Home extends React.Component 

在组件/index.js中

export * from './Home/Home'

在索引中

import Home from './components'

【讨论】：

试过但没用

给出错误 React.createElement: type is invalid -- 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件。

【参考方案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 我想像 export Home from ./Home/Home

如果我没有看到代码，这很难说。我希望您还希望将一些 Home 类/函数作为默认导出，然后您可以执行此操作（或再次执行上述解决方案）：

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

或者，再次：

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

export default Home;

我要在index.js 起点import Home from ./components.

由于现在有默认导出，您可以这样做（导入时您始终可以从路径中省略 index.js）：

import Home from './components';

【参考方案3】：

在您的 Home.js 中：

export class Home extends Component /* your code */

在 index.js 中：

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

在主文件中：

import Home from './components'

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

【参考方案4】：

为了导出所有组件，您可以在index.js 中使用以下模式

export Home from './Home'

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