导入与它们所在目录同名的 JavaScript 文件答案

【问题标题】：Importing JavaScript files with the same name as directory they're inside导入与它们所在目录同名的 JavaScript 文件
【发布时间】：2017-02-28 22:01:28
【问题描述】：

在我的 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 声明中使用该名称两次。

【问题讨论】：

import Component from './' ?

标签： javascript reactjs import webpack structure

【解决方案1】：

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

您的组件树结构（例如，每个组件都有不同的文件夹结构。保持干净和整洁取决于您。组件文件夹中的 Index.jsx 只是规范了对那些需要它们的组件的访问）：

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

components/index.jsx的内容

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

项目中其他地方使用这些组件的容器 Borscht.jsx

import {
    Beets,
    Cabbage,
} from 'src/components';

【讨论】：

对于遇到export X from 'Y'; 语法问题的人，我发现我必须将其更改为export {default as X} from 'Y'; 才能使其正常工作，更多信息在这里：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【解决方案2】：

如果你的文件夹已经告诉你哪个是组件名，你不需要再把它放在里面的文件名里。我使用这种方法。

通过在选项卡中添加文件夹名称，所有现代编辑器已经为我们解决了两个相同名称（ComponentA/index.jsx 和 ComponentB/index.jsx）的问题。

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

【讨论】：

【解决方案3】：

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 支持。

【讨论】：