介绍
让我们面对这一点，我们每个人都一定已经看到了这样的导入，并且很可能确实以类似的风格使用导入。但是，我确定这不是故意的，也不是打算使同龄人的生活变得困难。这可能是因为我们不知道桶文件。在本教程中，我将与demo一起讨论Barrel文件，以及它如何像简单的文件导入一样简单地简化我们的生活。只是实用而不是理论上！
桶不仅要使文件导入变得漂亮，而且有助于我们保持代码库清洁和可维护。
野外进口
好处
使用枪管文件，我们可以从诸如import { DataFormatter } from './components/utils/data-formatter/data-formatter';样式之类的导入变为kude2之类的导入。我们将在通过本教程时采取小步骤并改进。
一级导出 - 仅从组件文件夹导出
仅从相应的文件目录导出
第二级导出 - 从一个级别的较高文件夹导出
从外部目录出口
，但现在无需停止。进一步import { DataAnalytics, DataFormatter } from './components/utils';，从文件夹中导入不同的文件，而不是长期痛苦的导入语句。
第三级出口 - 结合不同的出口
将多个出口组合为单个出口
好吧！去import { Accordion, Button, DataAnalytics, DataFormatter } from './components';的方法，这呢？比较第一个导入样式import { DataFormatter } from './components/utils/data-formatter/data-formatter';时，它不是很简单。就像人类试图穿越银河系一样，我们走了很长一段路。
自动进口建议简化了。
第三级导出为关键字
无需在导入中将多个文件名编写直接使用代码中的文件。
我们甚至可以从Import import * as component from './components';中删除文件名，尽管我认为是导入到需要许多文件导入时的一种好方法，但我想我会将其留给开发人员的观点。
如果我们将文件导入某物，那么这就是如何使用。
演示
好吧！ Showtime，足够吹牛（时间来测试水域）。以下是我将用于本教程的项目结构。 App.tsx文件位于src目录下，src目录在项目目录下，即barrel-example。 third-party目录与SRC平行，即直接在root Project barrel-example目录下。
项目结构：
如果您只想将导入简化为level one export，请使用此。
为打字稿项目创建index.tsx（基于您的项目类型创建.jsx或.js），为Path ./barrel-example/src/components/utils/data-analytics/index.tsx下的组件
如果您更加好奇和承诺，则重新出发从其父目录Level two export。
再次为打字稿项目创建另一个index.tsx（基于您的项目类型CREATE .jsx或.js），该项目将提供两个级别的Export ./barrel-example/src/components/utils/index.tsx
如果您想要最好的，那么您将不会停下来参加Level three export。
为打字稿项目创建index.tsx（基于您的项目类型创建.jsx或.js），该项目将提供三级导出./barrel-example/src/components/index.tsx
在案例文件中导出的其他方式不直接在src目录内。
直接在根目录下与SRC Directory并行，因为它以前完成了Typescript项目的index.tsx（基于您的项目类型CREATE .jsx或.js），该项目将提供Level one export，./barrel-example/third-party/agent/index.tsx，./barrel-example/third-party/agent/index.tsx，重新export默认导出的导出文件到名称Export文件。
注意 - 无需更改默认值以在实际文件中名称导出。只需使用
default as Agent或任何文件/组件名称。
两种level two and three export。
并行目录，第二/三级导出create kude13用于打字稿项目（基于您的项目类型CREATE .jsx或.js），./barrel-example/third-party/index.tsx
就是这样！这是我GitHub project的链接，探索自己。
如果您已经到达这里，那么我竭尽全力使您阅读。请友好留下任何评论或要求进行任何更正。