从 React 中的文件夹导入 index(.ts|.js) 文件

【问题标题】：Import index(.ts|.js) file from folder in React从 React 中的文件夹导入 index(.ts|.js) 文件
【发布时间】：2018-10-10 14:26:03
【问题描述】：

我有以下文件夹结构：

src/
   Foo/
      index.ts
   Bar/
      index.ts
   index.ts

我想在我的 src/index.ts 文件中导入像 import Foo from "./Foo"; 这样的模块 Foo。 这是怎么做到的？ 因为当我想“导入文件夹”时，webpack 不会从 Foo/ 和 Bar/ 自动导入 index.ts 文件”。

【问题讨论】：

嗨@ZulusK，我的回答解决了你的问题吗？

标签： javascript reactjs typescript webpack

【解决方案1】：

您不必像您提到的那样导入folder。其实是webpackresolvehttps://webpack.js.org/configuration/resolve/#resolve-extensions完成的

默认情况下，webpack 会查找 .js 和 .json 扩展，这意味着当您导入 import Foo from './Foo' 时，它会尝试查找 ./Foo/index.js 或 ./Foo/index.json，如果找到，则会自动导入。如果您需要将此扩展到打字稿，则需要指定

resolve: {
 extensions: ['.js', '.json', '.ts']
}

当然，通过这种方式，您必须指定ts-loader 来处理打字稿文件https://github.com/TypeStrong/ts-loader，这将在导入打字稿时负责从打字稿进行转译。

【讨论】：