导入与其所在目录同名的JavaScript文件

Question

在我的React和Webpack项目中，我有以下React组件的项目结构：

Component/
├── Component.jsx
├── index.jsx
└── styles.css

index.jsx文件只是导入和导出Component.jsx;原因是在需要它的文件中，它允许使用以下内容：

import Component from '../Component'

而不是

import Component from '../Component/Component'

然而，这似乎是一个不必要的额外步骤，需要所有新组件都遵循。

考虑到这一点，我的问题是：我可以两全其美吗？我希望能够在我的目录中只有Component.jsx和styles.css，但不必在我的import声明中使用该名称两次。

Answer 1

我建议你个人喜欢以下结构：

你的组件树结构（作为一个例子，每个组件都有不同的文件夹结构。由你来保持它干净整洁.Componeus文件夹中的Index.jsx只是规范化访问那些需要它们的组件）：

register_filter('sort_by',sort_by)

src/components/ Butter/ Butter.jsx index.jsx Beets/ Beets.jsx Cabbage/ index.jsx Meat.jsx index.jsx

的内容

components/index.jsx

项目中使用这些组件的某个容器Borscht.jsx

export Butter from './Butter/index.jsx';
export Beets from './Beets/Beets.jsx';
export Cabbage from './Cabbage/index.jsx';
export Meat from './Meat.jsx';

Answer 2

webpack 用户的一个选择是安装 directory-named-webpack-plugin

安装，然后将以下内容添加到 Webpack 的配置文件中：

var DirectoryNamedWebpackPlugin = require("directory-named-webpack-plugin");

resolve: {
    plugins: [
        new DirectoryNamedWebpackPlugin()
    ]
}

当使用 require("component/foo") 和路径 "component/foo" 被解析为目录时，Webpack 将尝试寻找 component/foo/foo.js 作为入口点。

注意：虽然这种方法确实允许 webpack 在构建和捆绑时解析文件名，但您的智能感知/工具选项完全不同。除非它们也具有类似的功能，否则您可能会因为不静态提供完整的参考而失去 Go To Definition 和 Intellisense 支持。

Answer 3

如果您的文件夹已经告诉您哪个是组件名称，则无需再将其放在其中的文件名中。我用这种方法。

所有现代编辑都通过在标签中添加文件夹名称，为我们解决了两个相同名称（ComponentA/index.jsx和ComponentB/index.jsx）的麻烦。

请注意，这是一个Vue组件，但它对React来说是一样的。