从/folder/folder.js导入Webpack而不是/folder/index.js

Question

使用webpack，当我在./blah/中创建index.js然后执行import blah from './blah'它成功从index.js获取

但是，我的代码编辑器现在已经完成了名为index.js的选项卡。然后按Ctrl + Shift + P查找现在有一个index.js的BUNCH

因此我一直在做名称index.js与文件夹名称相同。所以/folder/folder.js。但是，如果我这样做，我的所有import语句现在都是：

import blah from './blah/blah`

现在，仅仅输入一个额外的/blah对我来说并不太啰嗦。但我只是想知道，是否可以使用与index.js相同的名称来处理js文件？

Answer 1

解决此问题的另一个解决方案是在每个文件夹中创建一个package.json，如下所示：

{
   "main":"blah.js"
}

Answer 2

Github用户shaketbaby制作了一个webpack plugin，以一个问题的方式处理进口。

首先将以下内容添加到您的webpack配置中：

const DirectoryNamedPlugin = require("directory-named-webpack-plugin");

const config = {
  ...
  resolve: {
    ...
    plugins: [
      new DirectoryNamedPlugin(true)
    ]
  },
  ...
}
export default config

然后你可以使用import blah from './blah'来解析位于./blah/blah.js的文件。

如果第一个参数是true，则在无法找到blah/index.js的情况下，解析器将回退到先前的行为blah/blah.js。

Answer 3

另外一个选项：

在你的文件夹folder/中，创建以下文件index.js：

import folder from './folder.js';
export default folder;